jQuery选择器

jQuery选择器

<div class="divs">1</div>
<div id="div1">2</div>
<div class="divs">3</div>
<div>4</div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

标签名选择器、id选择器、class选择器

// $("div");// 按照标签名称将元素放在一个列表中，这个列表就叫做jQuery对象
        
// 标签名选择器
console.log($("div"));
// id选择器
console.log($("#div1"));
// class选择器
console.log($(".divs"));

// 采用的连缀方式，连续调用功能函数
$(".divs").css("color","red");

// 选中div标签去添加超链接
$("div").html("<a href='#'>1</a>");
// 上下这两种写法一样
var divs=document.querySelectorAll("div");
for(var i=0;i<divs.length;i++){
    divs[i].innerHTML="<a href='#'>1</a>";
}


// jQuery对象是一个列表，可以包含很多，也可以包含一个元素
// 所有的DOM方法，jQuery对象都不能使用

// DOM对象是一个对象(是一个元素)，只能是一个对象，所有的jQuery方法DOM都不能使用

// jQuery常用方法：
// DOM转换为jQuery
// jQuery转换为DOM数组
// jQuery列表中提取DOM
// jQuery列表中提取某个形成新的jQuery对象

// 当使用jQuery，就转换为jQuery使用，尽量不要使用DOM
$("div").html("");
$("div").text("");// 添加文本
$("div").width(100);// 设置div的行内样式width宽度
$("div").height(100);// 设置div的行内样式height宽度
$("div").css("backgroundColor","red");// 设置div的行内样式背景颜色
$("div").on("click",clickHandler);// 给所有div添加点击事件侦听
$("div").off("click",clickHandler);// 给所有div删除点击事件侦听

// 给所有的button标签元素添加点击事件
$("button").on("click",clickHandler);
// 点击事件函数
function clickHandler(e){
    console.log($(this));
}

将DOM元素转换为jQuery对象

将jQuery元素转换为DOM对象

$(DOM)

// 将jQuery列表转换为DOM对象的数组
var arr=Array.from($("button"));
console.log(arr);

// 将jQuery列表中第几个DOM元素提取出来变为DOM对象
console.log($("button")[0]);// button按钮1
console.log($("button").get(0));// button按钮1

console.log($($("div")[3]));// 将DOM元素变为jQuery元素
console.log($("div").eq(3));// 和上面写法一样，这种写法更好

// 将jQuery列表中指定下标的元素筛选形成新的jQuery对象
$("div").eq(3).css("color","red");
// 下面这种写法和上面一样
$("div:eq(3)").css("color","red");

其它选择器

* 通配符选择器
div,span 群组选择器
div span 后代选择器
div>span 子代选择器
div+span 紧邻的下一个兄弟选择器
div~span div下面的所有兄弟选择器

<ul>
    <li>1</li>
    <li>2
        <div>3</div>
    </li>
    <li>4
        <div>5</div>
    </li>
    <li>6</li>
</ul>
<ul class="divs">
    <li>1</li>
    <li>2
        <div>3</div>
    </li>
    <li>4
        <div>5</div>
    </li>
    <li>6</li>
</ul>
<div>6</div>
<div class="divs">
    <div></div>
    <div class="divs"></div>
    <div></div>
</div>
<div class="divs">
    <div></div>
    <div class="divs"></div>
    <div></div>
</div>
// 获得所有的li和div标签元素
console.log($("li ,div"));// 群组选择器
// 获得ul标签元素下面的所有div元素
console.log($("ul div")); // 后代选择器
// 获得li元素下面子代div元素
console.log($("li>div")); // 子代选择器

// 选择div标签中class是divs的所有元素
console.log($("div.divs"));

// 选择div标签后代中class是divs的元素
console.log($("div .divs"));
console.log($("div").find(".divs"));// 和上面写法相同，这种写法更精准
// 所有div的子代有多少个元素
console.log($("div>*").length);
console.log($("div").children("div"));// 等同于$("div>div");
console.log($("div *"));

<ul>
    <li>-1</li>
    <span>0</span>
    <li>1</li>
    <li>2</li>
    <li id="li0">3</li>  
    <li>4</li>
    <li>5</li>
    <span>0</span>
    <li>6</li>
</ul>
// 选择id是li0的下一个兄弟元素设置颜色红色
$("#li0+").css("color","Red");
// 选择id是li0的下一个兄弟元素，这个兄弟元素可以是任意元素
$("#li0+*").css("color","red");
// 查找id是li0的下一个兄弟元素必须是li的，如果不是li元素就不能被选中，设置无效
$("#li0+li").css("color","red");
$("#li0").next("li").css("color","red");// 等同于$("#li0+li")
$("#li0").next().css("color","red");// 等同于$("#li0+")

$("#li0~").css("color","red");
// 选择id是li0的后面的所有兄弟元素
$("#li0~*").css("color","red");
// 选择id是li0的后面的所有li标签的兄弟元素
$("#li0~li").css("color","red");
// 选择id是li0的后面的所有span标签的兄弟元素
$("#li0~span").css("color","red");
$("#li0").nextAll("li").css("color","red");// 等同于$("#li0~li")

// 选择从id是li0的元素开始向下选择兄弟元素到span元素之前为止
$("#li0").nextUntil("span").css("color","red");
// 获取id是li0的上一个兄弟元素是li元素的
$("#li0").prev("li").css("color","red");
// 获取id是li0的向上的所有兄弟元素是li元素的
$("#li0").prevAll("li").css("color","red");
// 选择从id是li0的元素开始向上选择兄弟元素到span元素之前为止
$("#li0").prevUntil("span").css("color","red");
// 根据id是li0的元素所有的上下的兄弟元素中是span的元素
$("#li0").siblings("span").css("color","red");

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
// 设置所有div元素宽高、背景图颜色和边框
$("div").width(50).height(50).css({
    backgroundColor:"red",
    border:"1px solid #000000"
// 所有div元素添加点击事件
}).on("click",function(e){
    // 当点击的元素背景色变为绿色，其它所有兄弟元素div变为红色
    $(this).css("backgroundColor","green")
    .siblings().css("backgroundColor","red");
});