jQuery随笔

基本的jQuery方法

获取和设置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的儿子节点的最前面
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲mainDiv").prepe…(“p”))
$("p").prependTo($("#mainDiv"))

插入到节点后面

// 将p变成maindiv的紧邻的弟弟节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲mainDiv").after…(“p”))
$("p").insertAfter($("#mainDiv"))

插入到节点前面

// 让p标签变成maindiv的哥哥节点
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲mainDiv").befor…(“p”))
$("p").insertBefore($("#mainDiv"))

包裹节点

//分别给每个p标签加一个div父节点
$(“p”).wrap("

")
// 把所有p标签都放入同一个div父节点里面
$(“p”).wrapAll("

")

移出包裹节点

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

复制节点

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

删除节点

$(“p”).remove() //删除自己

删除父节点

$(“p”).parent().remove()

替换节点

$(“p”).replaceWith(字符串或者标签)基本的jQuery方法