【jQuery】学习笔记（二）

欢迎转载，请注明作者和出处。

本文链接： https://blog.csdn.net/weixin_43217942/article/details/102537587

文章目录

jQuery的holdReady（boolean）方法
基础选择器
层级关系选择器
基于标签状态的选择器
原生的选择器可以在jQuery中使用吗
jQuery中的内容选择器有哪些？使用场景是什么？
parent的方法和：parent选择器有什么区别？
parents方法和parent有什么区别？
什么是属性？
如何操作属性？
什么是属性节点？
如何操作属性节点？
属性和属性节点的区别？
在设置属性的时候如何选择prop()或attr()
prop()方法获取和设置的区别是什么?
prop()如何给多个每个属性节点设置多个值?
jQuery类操作相关方法
操作网页文本、HTML代码片段
$("selector")与 $("selector")[0]返回结果的区别
jQuery位置操作方法

jQuery的holdReady（boolean）方法

此方法默认为false，当传入true时，取消ready（）的执行。
测试代码：

        $.holdReady(true);
        $(document).ready(function () {
            alert("test holdReady");
        });

基础选择器

//id选择器
$("#id")

//元素选择器
$("标签");

//类选择器
$(".class")

//并集选择器
$("selector,selector,selector,...");

层级关系选择器

//后代选择器 $("祖先  后代")
$("ul li")

//子代选择器 $("祖先>后代")
$("ul>li")

// 相邻元素选择器 $("tag tag")
$("li+li")

//同级选择器  找到所有与表单同辈的 input 元素
<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
</form>
<input name="none" />
$("form ~ input")
结果:[ <input name="none" /> ]

基于标签状态的选择器

// :first 选择首元素
$("ul>li:first")==$("ul>li:nth(1)");

$("ul>li:nth-child(2n)") //偶元素选择器
$("ul>li:nth-child(2n+1)")//奇元素选择器

// :last 选择最后一个元素
$("ul>li:last")

原生的选择器可以在jQuery中使用吗

jQuery不仅支持原生的CSS选择器，还支持一些特有的选择器。

jQuery中的内容选择器有哪些？使用场景是什么？

:contains(text) 匹配包含给定文本的元素
:empty 匹配没有文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 与:empty相反，匹配含有子元素或者文本的元素

parent的方法和：parent选择器有什么区别？

parent（）方法用来获取当前元素的父元素，而：parent选择器使用来匹配含内容的元素。

parents方法和parent有什么区别？

parent()就是找jquery选择器选择中的元素的直接父元素的集合，不含祖先元素。而parents()找得是 jquery选择器选中元素的祖先元素包括父元素，共同的祖先元素合并。

什么是属性？

对象上保存的对象就是属性。

如何操作属性？

对象.属性名称 = 值；
对象.属性名;
对象[属性名称] = 值;

//prop()方法
$("div").prop("class");//获取属性
$("div").prop("class","box")//设置或改变 属性

//removeProp()方法
$("div").removeProp("class","box")//去除属性

什么是属性节点？

在标签中添加的属性是属性节点, 属性节点显示直接显示在标签上.
所有的属性节点都存储在dom元素的attributes属性中.

//其中 data-src 就是一个属性节点，是开发者附加上去的
<img src="" alt=" data-src = "images/a.jpg">

如何操作属性节点？

通过原生JS的setAttribute（）或jQuery的attr（）

//原生JS
dom元素.setAttribute("属性名","属性值");
dom元素.getAttribute("属性名");
//jQuery
$("selector").attr(name|pro|key,value|fn);
/*
1. 如果attr()传入一个参数,相当于getter
2. 如果传递两个参数, 是通过键/值方式设置属性, 功能是新增或修改
*/
$("selector").removeAttr("属性名");//可以一次删除多个属性, 中间使用空格分隔

属性和属性节点的区别？

属性是对象中的对象，属性节点可以包含在属性中，一般属性节点都包含在DOM对象中。

在设置属性的时候如何选择prop()或attr()

官方推荐在操作属性节点时, 具有true/false两个属性加点, 如checked、selected或者disabled，使用prop(), 其他使用attr( ).

prop()方法获取和设置的区别是什么?

实质性的区别是传入参数的数量, 如果传入一个参数则充当getter, 如果传入两个参数相当于setter, 也可以改变属性的值.

prop()如何给多个每个属性节点设置多个值?

一次传入多对参数.

$("selector").prop("disableed":"true","color":"red",...)//以伪数组方式

jQuery类操作相关方法

使用addClass(), removeClass(), toggleClass()方法

addClass() 在标签上添加类名
removeClass（）在标签上删除类名
toggleClass（）在标签上切换类名，有就删除，没有就添加

    <style>
        .redBg{
            background: red;
        }
        .boldBorder{
            border: 10px solid greenyellow;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
    
<button>添加类</button>
<button>移除类</button>
<button>切换类</button>
<div ></div>

<script>
var $div = $("div");

console.log($div);
var add = $("button")[0];
var remove = $("button")[1];
var toggle = $("button")[2];

add.onclick = function () {
    $div.addClass("redBg");
};

remove.onclick = function () {
    $div.removeClass("redBg");
};

toggle.onclick = function () {
    $div.toggleClass("redBg");
};
</script>

操作网页文本、HTML代码片段

html() 获取或设置某个元素的HTML文本，相当于原生JS的innerHTML
text（）获取或设置元素中的文本，相当于原生JS的innerText
val（）获取或设置功能性的标签的值

代码示例:

    <style>
        div{
            width: 100px;
            height: 100px;
            background: darkgray;

        }
    </style>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<input type="text">
<div class="box"></div>

<script>
var $btns = $("button");
var $div = $("div");
var $input = $("input[type=text]")[0];//<input type = "text">,而$("input")得到的是jQuery伪数组。

$btns[0].onclick = function () {
    $div.html($input.value);
};

$btns[1].onclick = function () {
    console.log($div.html());
};

$btns[2].onclick = function () {
    $div.text($input.value);
};

$btns[3].onclick = function () {
    console.log($div.text());
};

$btns[4].onclick = function () {
    $("input").val(123);//必须是jQuery对象才可以使用val()
};

$btns[5].onclick = function () {
    console.log($input.value);
};
</script>

$(“selector”)与 $(“selector”)[0]返回结果的区别

代码示例：

<div></div>
<div></div>

<script>
    console.log($("div"));
    console.log($("div")[0]);
</script>

//结果
jQuery.fn.init(2)
<div></div>

总结： 显然$(“div”)返回的是jQuery对象数组(伪数组),而 $(“div”)返回的是DOM对象. 只有jQuery封装过的JS对象才可以使用jQuery的方法, 而 $(“div”)[0]已经不是jQuery对象了, 因此它不能使用jQuery对象, $( $(“div”)[0])之后也可以使用jQuery的方法。

jQuery位置操作方法

width（）获取或设置元素的宽度
height（）获取或设置元素的高度
innerWidth（）获取或设置第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
innerHeight（）获取或设置第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
offset（）获取匹配元素在当前视口（viewport）的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
position（）只获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。
scrollTop（）获取第一段相对滚动条顶部的偏移。所传的是一个值，而不是字符串。
scrollLeft（）获取匹配元素相对滚动条左侧的偏移。

//为了兼容IE浏览器，scrpllTop/scrollLeft通常的写法为
$("html.body").scrollTop(100);

PS：希望以上对你有帮助，欢迎评论，求点赞，你的认可是我写作的最大动力~~