【jQuery】学习笔记（二）

客官°小女子只卖身不卖艺 2021-09-20 19:36 392阅读 0赞

### 文章目录 ###

*   *   *  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（）在标签上切换类名，有就删除，没有就添加

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

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

**代码示例:**

### $(“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);