2021.11.8Jquery

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

 

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:
$("p")

例：

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器

例：

$(document).ready(function(){

        $("button").click(function(){

              $("#test").hide();

    });

});

 

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

例：

$(document).ready(function(){

        $("button").click(function(){

              $(".test").hide();

       });

});

 

$("*")          选取所有元素

$(this)        选取当前 HTML 元素

$("tr:even")      选取偶数位置的 <tr> 元素

$("tr:odd")      选取奇数位置的 <tr> 元素

  

 

 

 

 

 

 

 

jQuery的三种写法
 $(document).ready(function(){

 })

 $().ready(function(){

})

 $(function(){

 })

 js => jq
 jq = $(js/dom)
 jq = $(div)
 jq = $("<li>列表</li>")

jq => js
 [0]
js = jq[0]
js = $(div)[0]

$(function(){
 var div = document.querySelector(".div")
 简化之后
 var $div = $(".div")
var $div = $(".div")
 $div.click(function(){

 })

 

// 基本筛选器
// $("li:eq(0)").css("color","red")//中间不能加空格
// $("li:gt(2)").css("color","green")
// $("li:lt(2)").css("color","blue")

// $("li:parent").css("color","red")
// $("li:has(.span)").css("color","red") 选择器
// $("li:contains(999)").css("color","red") 文本
})