JQuery(补充)

jQuery补充

属性操作
1.attr
	attr(属性名) 返回第一个匹配的属性值
	attr(属性名,值) 给所有匹配元素添加属性值
	attr({k1:v1,k2:v2})	为所有匹配元素添加多个属性值
	removeAttr(属性名)	从每一匹配的元素中删除一个属性
2.prop
	prop(属性名)	返回的是bool值
	removeProp		移除属性

区别:
1.	
    attr全称attribute(属性) 
    prop全称property(属性)
	虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
2.prop不支持获取标签的自定义属性,且返回的是布尔值

总结:
	1.对于标签上有的能看到的属性和自定义属性都用attr
	2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

1.添加到指定元素内部的后面
    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B

2.添加到指定元素内部的前面
    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B

3.添加到指定元素外部的后面
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

4.添加到指定元素外部的前面
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面

5.移除和清空元素
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点。

事件

1.事件绑定
	 $('p').event(function(){}) 	方法一
	 $('p').on('event',(可选加'选择器'),function(){})	方法二
2.移除事件
	$('p').off('event',(可选加'选择器'),function(){})

阻止后续事件执行

阻止后续事件执行
	1.return false;	 	常见阻止表单提交
	2.e.preventDefault();	需要一个参数e(function的参数)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

动画效果

// 基本
     jQ对象.show([s,[e],[fn]])	出现
     jQ对象.hide([s,[e],[fn]])	消失
     jQ对象.toggle([s],[e],[fn])	有消失没有出现
// 滑动
     jQ对象.slideDown([s],[e],[fn])	出现
     jQ对象.slideUp([s,[e],[fn]])	消失
     jQ对象.slideToggle([s],[e],[fn])	有消失没有出现
// 淡入淡出
     jQ对象.fadeIn([s],[e],[fn])  浮现
     jQ对象.fadeOut([s],[e],[fn])	淡出
     jQ对象.fadeTo([[s],o,[e],[fn]])	淡出到透明度为多少
     jQ对象.fadeToggle([s,[e],[fn]])	有淡出,没有浮现
     
s:毫秒
fn:函数

each

1.迭代数字索引其他对象通过其属性名进行迭代。
jQuery.each(collection, callback(indexInArray, valueOfElement)):
	例子:
	li =[10,20,30,40]
    $.each(li,function(i, v){
      console.log(i, v);//i是索引,v是每次循环的具体元素。
    })

2.遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each(function(index, Element)):
      例子:
          $("li").each(function(){
          $(this).addClass("c1");
        });

data

1.$("div").data("k");//返回第一个div标签中保存的"k"的值
2.$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
3.$("div").removeData("k");  //移除元素上存放k对应的数据
posted @ 2019-06-04 22:17  Mr-Bear  阅读(102)  评论(0编辑  收藏  举报