jQuery选择器、元素属性操作--jQuery基础知识点(1)

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://ligang.blog.csdn.net/article/details/41419849

一、jQuery代码风格：

1. $(document).ready(function(){})可简写为$(function(){})其在页面框架下载完毕后就执行;而window.οnlοad=function(){}必须在页面全部加在完毕（包含图片下载）后才能执行。很明显前者的执行效率高于后者。 2. 在jQuery选择器定位页面元素时，无须考虑定位元素在页面中是否存在，即使不存在，浏览器也不会报错！

二、jQuery选择器：

1. 基本选择器：效率： $("#id") > $("element") > $(".class") > $("*") 2. 层次选择器：例：$("div span") 例：$("#divMid").siblings("div") 3. 过滤选择器：例：$("#select option:selected") $("li:nth-child(2)") （1）简单过滤选择器【:first、:last、:not、:even、:odd、:eq、:gt、:lt、:header、:animated】 （2）内容过滤选择器【:contains、:empty、:has、:parent】 （3）可见性过滤选择器【:hidden、:visible】 （4）属性过滤选择器【[attribute=value]、[attribute!(^,$,*)=value]】 （5）子元素过滤选择器【:nth-child(eq|even|odd|index)、:first-child、:last-child、:noly-child】 （6）表单对象属性过滤选择器【:enabled、:disabled、:checked、:selected】 4. 表单选择器：例：$("#form1 :input") 例：$("#form1 :password")

三、 jQuery元素属性操作：

1. DOM(Document Object Model，文档对象模型) 2. 通过该函数返回的值作为元素的属性 attr(key,function(index)) 例：$("img").attr("src",function(){ return "Images/img0" + Math.floor(Math.random()*2+1)+".jpg" }); 3. $("select").val().join(","); //获取列表框中全部被选中的选项值 $(":radio").val(["radio2","radio3"]); //value值为radio2和radio3的单选框被选中 4. toggleClass(class); //元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别 5. 动态创建节点：$(html) var $div = $("<div title="jQuery学习">加油</div>"); $("body").append($div); 等价于：$($div).appendTo($("body")); 6. clone()&clone(true) clone()被复制后的元素以不具有任何元素的行为 7. replaceWith(content)&replaceAll(selector) $("#id").repalceWith("<span>ligang</span>"); //后者替换前者 $("<span>ligang</span>").replaceAll("#id"); //前者替换后者 8. wrap()&wrapInner() $("p").wrap("<b></b>"); //包裹在p标签外<b><p></p></b> $("span").wrapInner("<i></i>"); //span内的内容被i标签包裹<span><i></i></span> 9. $("img").each(function(index){}) //index下标从0开始 10. remove()&empty() empty(); //只移除了指定元素中的所有子节点 remove([expr]); //把其从dom中删除，而不会保留其所占的位置 <p>Hello</p> $("p").empty(); //结果：Hello $("p").remove(); //结果：p标签也被删除