基本的jQuery方法

加载顺序

1.加载顺序高

  $(document).ready(function () {
          console.log("当文档对象加载完毕时");
  })
  $(function () {
          console.log("加载完毕时");
  })

2. 加载顺序低

 $(window).load(function () {
        console.log("jq页面加载完毕时");
 })

获取和设置html

$("选择器").html()
$("选择器").html("我要添加的html文本结构")

获取和设置input的值

$("选择器").val()
$("选择器").val("值"）

获取和设置属性

$("选择器").attr()

1.设置单个属性

$("选择器").attr( “属性”，“属性值”，  })

2.设置多个属性

 $("选择器").attr({
		    属性：“属性值”，
		    属性：“属性值”，
		    ...
	    })

改变css样式

$("选择器").css({
    		    样式：“样式值”，
    		    样式：“样式值”，
    		    ...
    	    })

获取选中的选择框

$("input[type='checkbox']:checked")

事件绑定
1.绑定一个事件

$("选择器").onclick=function () {
        //函数体
}

2.绑定多个事件，执行相同的事件处理函数

 $("选择器").bind("事件1 事件2",function f() {
        //函数体
  })

3.绑定多个事件，分别执行不同的事件处理函数

$("选择器").bind({
        "事件1":function () {
		//函数体
        },
        "事件2":function () {
		//函数体
        },
        ...
    })

解除事件绑定
1.解除该jQuery对象上的所有的事件绑定

$("选择器").unbind()

2.解除该jQuery对象上的部分事件绑定

$("选择器").unbind("事件1");

3.解除某个事件的某一个处理函数的绑定

$("选择器").unbind("事件1"，函数名);//函数名不加括号

事件on的用法
1.提供一个事件委托的方法来绑定事件

 	// 为所有的子类选择器绑定事件，包括新增的节点对象
    $("父类选择器").on("事件","子类选择器",function () {
		//函数体
    })

2.模拟用户行为

	//模拟另一个节点对象的点击事件
    $("选择器1").on("click",function () {
        $("选择器2").trigger("click");
    })
    $("选择器1").on("click",function () {
        $("选择器2").click();
    })

3.自定义事件，移动端常用

 $("选择器1").on("自定义事件名",function () {
		//函数体
  })
 $("选择器2").on("click",function () {
        $("选择器1").click().trigger("自定义事件名")
 })

动画效果
1.animate(对象)

$("选择器").animate({
    //需要修改的css样式
    //jQuery动画改变的css只能是带数字类型值的属性，例如宽高，透明度等等
},2000,function () {
    $(this).css({
        //值非数字类型的属性，但是没有动画过渡效果
    })
})

2.停止当前动画，并开始执行下一个动画

$("选择器").stop(布尔值,布尔值);
//第一个参数true：是否清空动画队列，停止所有动画
//第二个参数true：直接将当前动画执行完毕

3.延迟动画

$("选择器").delay(2000).animate({
	//css样式
})

4.jQuery动画过渡效果插件

 jQuery-easing

jQuery的节点操作

移动节点

//将所有的p标签移动到mainDiv里面   
 $("p").appendTo($("#mainDiv"))

在最后面添加一个儿子节点

//给mainDiv在最后添加一个新的儿子节点
var newNode = $("文本结构")  
$("#mainDiv").append(newNode )

在最前面添加一个儿子节点

// 将p标签添加到maindiv的儿子节点的最前面
$("#mainDiv").prepend($("p"))
$("p").prependTo($("#mainDiv"))

插入到节点后面

 // 将p变成maindiv的紧邻的弟弟节点
$("#mainDiv").after($("p"))
$("p").insertAfter($("#mainDiv"))

插入到节点前面

 // 让p标签变成maindiv的哥哥节点
$("#mainDiv").before($("p"))
$("p").insertBefore($("#mainDiv"))

包裹节点

//分别给每个p标签加一个div父节点
 $("p").wrap("<div></div>")
// 把所有p标签都放入同一个div父节点里面
 $("p").wrapAll("<div></div>")

移出包裹节点

// 让选中的p标签 删除一个父节点， 如果父节点是body 则不删除
 $("p").unwrap()

复制节点

$("p").clone(布尔值)
 // true:所有子节点
 // false:只有自己

删除节点

$("p").remove()  //删除自己

删除父节点

$("p").parent().remove()

替换节点
$(“p”).replaceWith(字符串或者标签)