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("内容") // 设置元素的内容