jQuery 操作记录

100 阅读2分钟

jQuery操作记录

远程引用

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

隐式迭代

遍历 jQuery 对象内部 DOM 元素(伪数组形式存储)的过程就叫隐式迭代。给匹配的所有元素进行循环遍历,执行相应的方法,而不是我们再进行循环,简化我们的操作,方便我们的调用

选择器

基础选择器
$("#id");      //ID选择器
$(".class");   //类选择器
$("div");      //标签选择器
$("div,li,p"); //并集选择器
$("div.show"); //交集选择器
$("*");        //全选选择器
层次选择器
$("M N") 等价于 $(M).find(N)     //后代选择器
$("M>N") 等价于 $(M).children(N) //子代选择器
$("M+N") 等价于 $(M).next(N)     //单个兄弟选择器
$("M~N") 等价于 $(M).nextAll(N)  //兄弟选择器
筛选选择器
$(".first").parent();       //查找父亲
$("ul").children("li")      //子类选择器
$("ul").find("li");         //后代选择器
$(".first").siblings("li"); //查找兄弟节点,不包括自己本身。
$(".first").next();         //查找当前元素之后的下一个兄弟
$(".first").nextAll();      //查找当前元素之后的所有同辈元素
$(".last").prev();          //查找当前元素之前的上一个兄弟
$("last").prevAll();        //查找当前元素之前的所有同辈元素
$("div").hasClass("show");  //检查当前的元素是否含有某个特定的类,如果有,则返回 true
$("li").eq(2);              //相当于$("li:eq(2)"),选择第三个li标签,注意:index从0开始
常用于过滤节点的选择器
$("ul").children("li").first();            //找第一个元素
$("ul").children("li").last();             //找最后一个元素
$("ul").children("li").eq(2);              //找第3个元素
$("ul").children("li").filter("css选择器"); //找匹配css选择器的元素
$("ul").children("li").not("css选择器");    //找不匹配css选择器的元素

添加类与移除类

$('obj').addClass('class1');
$('obj').addClass('class1 class2'); //添加多个类

$('obj').removeClass('class1');
$('obj').removeClass('class1 class2'); //移除多个类

添加伪类:无法直接添加伪类,只能事先定义好一个类的伪类,然后用jQuery添加该类。

设定CSS

$("obj").css("background-color"); //返回css的属性

$("obj").css("background-color", "red"); //设置css的属性
$("obj").css({"background-color":"red","font-size":"14px"}); //批量设置css

添加元素与移除元素

$('.class').append(html); //在每个匹配元素内的末尾插入参数内容(父子关系)
$('.class').after(html);  //在每个匹配元素后插入参数内容(兄弟关系)

$('#id').remove();        //移除一个元素

属性操作

prop:设置或获取元素固有属性值,如<a>元素里面的herf<input>元素里面的type
prop("属性")          //获取属性
prop("属性","属性值") //设置属性
attr 设置或获取元素自定义属性值,比如给li添加index="1"
attr("属性")          //获取属性
attr("属性","属性值")  //设置属性
html 相当于原生 js 中的 innerHTML
html()       // 获取元素的内容
html("内容")  // 设置元素的内容
text 相当于原生 js 中的 innerText
text()       // 获取元素的内容
text("内容")  // 设置元素的内容
val 相当于原生 js 中的 value
val()       // 获取元素的内容
val("内容")  // 设置元素的内容