jQuery学习笔记

jQuery笔记1

1，简介
jQuery是JavaScript函数库，我们只需要调用相应的方法，宗旨是用最少的方法完成最复杂的功能。版本1.？兼容IE8，版本2.？不兼容IE8。1.9-1.11的版本差别不是很大。不要使用1.9以下的版本。
2，特点
2-1，核心库只有几十kb
2-2，代码简洁，支持链式代码风格
2-3，跨平台，jQuery对各种浏览器都保持了很好的兼容性，可大幅提高前端开发测试效率
2-4，高性能
2-5，插件众多
下面是辅助代码：

    
测试


 

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

快速生成li标签方法：li{$}10
3，/1,$可以传匿名函数（）{}/
$(function (){
/2,传页面元素选择器，：返回的是jQuery对象
* 主要是对原始DOM对象进行了一个封装
* jQuery提供了统一的API（属性和方法）都能够使用*/
$("#box").css("color","red");
console.log($);//返回初始化函数
console.log($());//调用一下初始化函数
console.log($("#box"));//返回的是jQuery对象
console.log($("#box").css("color","red"));//返回的还是jQuery对象

    $("#box").css("color","red").css("font-size","50px");
    console.log($("#box").css("color","red").css("font-size","50px"));
    /*上述还是返回jQuery对象，这是链式代码风格的原理，每次操作后都是返回jQuery对象*/

});
4，关于window.onload和$(document).ready(function(){})的区别
/*1，window.onload
* 页面加载完毕：html，css，所有资源（包括图片视频等）全部加载完以后执行里面的内容
* 只能写一次，会覆盖
*
2，$(document).ready(function(){})
* 只需要等待DOM结构加载完毕就可以执行，加载DOM结构很快，使用这个不用等图片或者视频加载完就可以执行
* 可以执行多次，不会被覆盖
* 简写$(function(){...})
* 另外一种写法，匿名函数自动执行，把jQuery对象传参数进去，目的是为了避免和其他函数库发生冲突
* (function ($){
* 代码
* })(jQuery)
*
* 3，如果必须要等资源加载完，则使用jQuery提供的方法
* $(window).load(function(){...})
* 可以使用多次，不会被覆盖/
5，jQuery-DOM选择器如何使用
5-1，css2基本选择器和符合选择器都能正常使用：$("#id")，$(".class")，$("tag")
例如：
$(function (){
var myli=$("div ul li");获取上述结构中的li标签对象
console.log(myli);
console.log(myli.length);
//返回10， length是jquery里提供的属性
如果在DOM中直接使用length是不能够有结果的：
console.log(document.getElementById("box").length);
//返回undefined，length不是原生的方法，可以用在获取document.getElementsByTagName()和document.getElementsByClassName()中
DOM对象和jQuery对象之间的互换
//打印DOM对象
console.log(document.getElementById("box"));
//打印jQuery对象
console.log($("#box"));
//把jQuery对象转换为DOM对象
console.log($("#box").get(0));
//把原生DOM对象转换为jQuery对象
console.log($(document.getElementById("box")));
});
5-2，对input标签内容进行更改
DOM结构：

点击获取值
点击设置值

function getValue(){
    console.log("==========");
    var mytxt=$("input[type='text']").val();//jquery对象获取value的方法
    console.log(mytxt);
}

function setValue(){
$("input[type='text']").val("你好")
}
5-3，对html结构进行更改
DOM结构

测试

获取HTML
设置HTML
addHTML

function getHTML(){
console.log($("#box").html());
}
function setHTML(){
$("#box").html("

我是替换的标题

");
}
function addHTML(){
$("#box").html($("#box").html()+"

我是替换的标题

");
}
5-4,关于checkbox以及属性操作

快速生成input标签：
Input[type=”checkbox”value=”$”]*10

5-5，对标签的class操作
DOM结构

测试

class切换


6，jQuery-DOM节点操作
DOM结构

我是main

P元素

内部操作节点：

依次插入节点到main节点内部后面
移动节点到main节点内部最后面
依次插入节点到main节点内部前面
移动节点到main节点内部最前面

外部操作节点：

移动到main节点外部之后
main节点外后插入
移动到main节点外部之前
main节点外前插入

包裹

指定节点包裹
移除包裹

复制，删除，替换

复制节点
删除节点
替换节点