JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器

相關免費學習推薦：#javascript##（影片）

jQuery常用選擇器和過濾選擇器

#使用方法下載Jquery檔案庫，保存在網站js資料夾中，使用script標籤引入，放在head標籤內
window.οnlοad=function()可簡化為$(function)

window.οnlοad=function(){ … 頁面載入事件}

$(function){ …頁面載入事件}
下面的是上面的簡化方式

#jQuery的選擇器

1. $("#id") ：id选择器 $("p") ：p选择器 $(".class") ：类选择器 $(".class,.class2,#id") ：组合选择器

   登入後複製

2. $("#id>.class") ：子元素选择器$("#id .class") ：后代选择器$("#id+.class") ：紧邻下一个元素选择器$("#id~.class") ：兄弟元素选择器

   登入後複製

3. $(":input")//获取inpu。textarea，select，button元素$(":text")//所有的单行文本框$(":text")等价于$("[type=text]")，推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素$(":radio") //获取type=radio的input元素$(":checkbox") //获取type=checkbox的input元素$(":submit") //获取type=submit的input元素$(":reset") //获取type=reset的input元素$(":button") //获取type=button的input元素$(":file") //获取type=file的input元素$(":image") //获取type=image的input元素

   登入後複製

4. 過濾器使用：開頭

#基本過濾選擇器

5. $("Ii:first") ：第一个li $("li:last") ：最后一个li $("li:even") ：挑选 下标为偶数的li $("li:odd") ：挑选 下标为奇数的li $("Ii:eq(4)") ：下标等 于4的li(第五个li元素)$("Ii:gt(2)") ：下标大于 2的li $("li:lt(2)") ：下标小于 2的li$("Ii:not(#runoob)") ：挑选除id="runoob"以外的所有li$("Ii:header") ：所有标题元素$("Ii:animated") ：正在执行动画效果的元素

   登入後複製

內容過濾選擇器

$("li:contains(text)") ：含有文本内容为text的元素$("li::empty")：获取不包含后代元素或者文本的空元素$("li::has(selector)")：获取含有后代元素为selector的元素$("li::parent")：获取含有后代元素或者文本的非空元素

可見性篩選器

$("li:hidden") ：隐藏li元素$("li:visible") ：显示li元素

屬性過濾選擇器

$("li[title]") ：获取所有属性包括title的li元素$("p[id^='qq']") ：id属性值以qq开头的p元素$("p[id*='bb'") ：id属性值包含bb的p元素$("li[title=text2]") ：li属性值等于text2的元素$("p[id!='aa'") ：id属性值不等于aa的p元素$("p[id$='z']") ：id 属性值以zz结尾的p$("input[id][name$='man']")：多属性选过滤，同时满足两个属性的条件的元素

$("input:enabled") ：选取可用的表单元素$("input:disabled") ：选取不可用的表单元素$("input:checked") ：选取被选中是input元素$("input:selected") ：选取被选中的option元素

登入後複製

jQuery操作DOM

產生jquery物件

var obj=$("#content")

取得或設定元素內部的HTML程式碼

var obj=$("#content")； obj.html("jQuery对象")

登入後複製

DOM物件轉換成jQuery物件

登入後複製

單一屬性語法jQuery物件.css(name,value)：name為樣式名稱，value為樣式值同時設定多個屬性語法
jQuery物件.css{(name:value,name:value,name:value…)}：name為樣式名稱，value為樣式值

jQuery使用DOM操作元素增加類別樣式，刪除類別樣式，切換不同類別樣式

jQuery物件.removeaClass(class)

jQuery使用DOM操作元素內容和值的操作

jQuery物件.html(content)：用於設定所有符合元素的HTML內容或文字內容

jQuery物件. text(content)：用於設定所有符合元素的文字內容jQuery物件.val()：用於取得或設定元素的值jQuery物件.attr(name)：用於取得元素的屬性值

jQuery物件.attr(name，function（index）)：綁定function函數，透過此函數傳回值作為元素的屬性值
• jQuery物件.removeAttr(name)：用於刪除元素的屬性值
• #jQuery使用DOM操作節點
• $(html):建立html的jQuery物件

eg:$("").appendTo(p)

eg:$("ul").append("li"):a里添加b

eg:$li.appendTo("ul"):a添加到b

eg: $("ul").prependTo("li")

eg: $li.prependTo("ul")

eg: $("ul").after($p)

eg: $p.insertAfter("ul")

eg: $("ul").before($p)

eg: $p.insertBefore("ul")

eg: $("li").replaceWith("ol")

eg: $("ol").replaceAll("li")

eg: $("ol").clon(ture)

eg: $("ul li").remove()//删除ul下的所有li $("ul li").remove("li li:last")//删除ul下的最后一个li

以上是JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！