jQuery选择器及jQuery基本操作

待我称王封你为后i 2023-07-16 12:55 12阅读 0赞

**`吐血整理，如有错误，欢迎指出，感激不尽~`**

### 目录 ###

*  1. jq选择器
 *  2. 属性操作
 *  3. Class操作
 *  4. 样式操作
 *  5. 内容操作
 *  6. 尺寸操作

# 1. jq选择器 #

*  jq的选择器，就是在执行jq函数时传参
 *  是用来获取DOM元素的方法，通过下标可以获取其中某一个DOM元素
 *  $ 函数不管使用选择器选中了几个元素，$函数的返回值都是一个对象（伪数组）
 *  jq选择器是jq最核心的内容，大大简化的了DOM对象的查询
 *  css1-css3的选择器，都可以当做$函数的参数，如下：

Id选择器: $("#box");
    Class选择器: $(".box");
    标签选择器: $("span");
    通配符选择器: $("*");
    包含选择器:  $("#box p");
    子选择器: $("#box>p");
    群组选择器: $("#box,.cont,p");
    属性选择器: $("input[type=button]");

*  还有一些特殊的选择器，如下：

$("#box:first");
    $("#box:last");
    $("#box:eq(3)");
    $("#box:odd");
    $("#box:even");

*  及jq的筛选器（对选择器获取到的一组标签对象进行筛选，便于链式编程），如下：

.first(): 匹配第一个
    .last(): 匹配最后一个
    .eq(): 匹配指定下标
    .find(): 匹配指定的后代元素
    .children(): 匹配指定的子元素
    .prev(): 匹配上一个兄弟
    .prevAll(): 匹配上面所有的兄弟
    .next(): 匹配下一个兄弟
    .nextAll(): 匹配下面所有兄弟
    .siblings(): 匹配所有兄弟,不管上下
    .parent(): 匹配直接父级
    .parents(): 匹配所有父级
    .end(): 匹配链式编程选择器的上一级

*  jq的$函数类似于原生就是document.querySelectorAll()
 *  实际上先有jq，然后原生js才有了querySelectorAll()
 *  原生js的DOM对象和jq的DOM对象的转换方式：

// 原生js转jq
        $(原生DOM对象);
    // jq转原生js
        jqDOM对象[0];

*  jq选择器的使用方法如下，部分举例，希望大家可以举一反三哦~~

// 属性
    $("input[abc=hello][qwe]").css("background","red");
    
    // 包含：后代
    $(".msg h2").css("background","red");
    
    // 群组：
    $("#box,.cont,span").css("background","red");
    
    // 包含：子
    $(".msg>h2").css("background","red");
    
    // 下一个兄弟
    $(".msg+span").css("background","red");
    // 下面所有兄弟
    $(".msg~span").css("background","red");
    
    // 指定索引，从0开始
    $(".cont:eq(1)").css("background","red");
    
    // 第一个或最后一个
    $(".list li:first").css("background","red");
    $(".list li:last").css("background","red");
    
    // 第奇数个或第偶数个
    $(".list li:odd").css("background","red");
    $(".list li:even").css("background","red");
    
    // 匹配所有兄弟
    $(".list").siblings().css("background","red");
    
    // 匹配直接父级或所有父级
    $(".xbox").parent().css("border","solid 1px black");
    $(".xbox").parents().css("border","solid 1px black");
    
    // 简单连缀
    $(".list").children("li").eq(3).end().css("background","red");

--------------------

# 2. 属性操作 #

原生JS设置属性方式如下：

ele.setAttribute()
    ele.getAttribute()

那么来看jq，如下：

①.attr()方法：  
`attr()`：

标签对象.attr(属性): 获取指定属性的属性值
    标签对象.attr(属性 , 属性值): 设定属性和属性值
    标签对象.attr(自定义属性 , 属性值): 设定自定义属性和属性值

> 注意：jq中的设置方法一般都可以为全部选中的元素设置，也就是说atrr方法内部自带了循环操作。而获取方法一般只能 获取第一个选中的元素。设置属性时，直接显示在标签上，为可见的内置或自定义。

`removeAttr()`：

$('.box').removeAttr('name');
    // 删除所有类名为box的name属性

②.prop()方法:  
`prop()`:

标签对象.prop(属性)： 获取指定属性的属性值
    标签对象.prop(属性 , 属性值)： 设定属性和属性值
    标签对象.prop(自定义属性 , 属性值)： 设定自定义属性和属性值

> 注意： 设置内置属性时，可以直接显示在标签上，为 可见的内置属性 设置自定义属性时，不会直接显示在标签上，为不可见的自定义属性。

`removeProp()`:删除指定的属性，多用于自定义属性。

--------------------

# 3. Class操作 #

**最常用的一个属性操作是类名**。  
原生JS操作方式如下：

ele.className = 'item';

那么来看jq，如下：

> hasClass(class): 判断标签是否具有某个class，返回布尔值。  
> addClass(class) ：为每个匹配的元素添加指定的类名。  
> removeClass(class) ：从所有匹配的元素中删除指定的类。  
> toggleClass(class)：如果存在（不存在）就删除（添加）一个类。

示例代码（1）：

$('.box').hasClass('item');
    $('.box').addClass('item');
    $('.box').removeClass('item');
    $('.box').toggleClass('item');

示例代码（2）：

①hasClass:

$("div").click(function(){ 
      if ( $(this).hasClass("protected") )
        $(this)
          .animate({  left: -10 })
          .animate({  left: 10 })
          .animate({  left: -10 })
          .animate({  left: 10 })
          .animate({  left: 0 });
    });

②addClass：

$('ul li:last').addClass(function() { 
      return 'item-' + $(this).index();
    });

③removeClass：删除最后一个元素上与前面重复的class。

$('li:last').removeClass(function() { 
        return $(this).prev().attr('class');
    });

④toggleClass：根据父元素来设置class属性。

$('div.foo').toggleClass(function() { 
      if ($(this).parent().is('.bar') { 
        return 'happy';
      } else { 
        return 'sad';
      }
    });

--------------------

# 4. 样式操作 #

（1）原生JS操作方式如下：

ele.style.width
    getComputedStyle

（2）那么来看jq，如下：

> 标签对象.css(属性)：获取指定属性的属性值  
> 标签对象.css(属性 , 属性值) ： 设定属性以及属性值  
> 标签对象.css(\{属性 : 属性值\}) ：以对象的形式,设定属性以及属性值，也可以同时设定多个属性，属性定义的方式比较灵活

示例代码：

$('.box').css('width',100)
    //将类名为box的元素宽度设置为100
    $('.box').css('width')
    //获取第一个类名为box的元素的宽度

**（3）注意：**

当用`.css({属性 : 属性值})` 这种方法时，因为是对象的形式，所以，其背景颜色（background-color）、行高（line-height）、字体大小（font-size）等这种由两个单词中间加中划线组成的属性在书写时，要注意去掉中划线，并写成`小驼峰`模式。`“px”可以省略`（但行高`（line-height）除外`，如果“px”省略，则变成倍数）。

示例代码：

$("#box").css({ 
        width:"100px",
        height:200,
        background:"red",
        opacity:0.5,
        fontSize:30,
        lineHeight:"100px"
    });

--------------------

# 5. 内容操作 #

（1）原生JS操作方式如下：

ele.innerHTML = '< h2 >ddd< /h2 >';
    ele.innerText = '< h2 >aaa< /h2 >';
    ipt.value = 'zhangsan'

（2）那么来看jq，如下：

> `.html()`：获取或者设置元素的html内容，这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中，我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。  
> `.text()`：获取或者设置元素的文本内容，结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。  
> `.val()`：获取或者设置输入框的内容，在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

示例代码（1）：  
`总结就是：没有参数是获取，有参数是设置`。

$('.box').html();		// 获取
    $('.box').html('aaa');   // 设置
    
    $('.box').text();		// 获取
    $('.box').text('aaa');  // 设置
    
    
    $('.ipt').val();		// 获取
    $('.ipt').val('aaa');   // 设置

示例代码（2）：  
`.html()`：

$("p").html(function(n){ 
        return "这个 p 元素的 index 是：" + n;
        });

`.text()`：

$("p").text(function(n){ 
        return "这个 p 元素的 index 是：" + n;
        });

`.val()`：

$('input:text.items').val(function() { 
      return this.value + ' ' + this.className;
    });

--------------------

# 6. 尺寸操作 #

*  `height([val])`：取得匹配元素当前计算的高度值（px）。参数的意思是：设定CSS中 ‘height’ 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

示例如下：以 50 像素的幅度增加 p 元素的高度。

$("button").click(function(){ 
        $("p").height(function(n,c){ 
        return c+50;
        });
      });

*  `width([val])`：取得第一个匹配元素当前计算的宽度值（px）。设定CSS中 ‘width’ 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。

示例如下：以 50 像素的幅度增加 p 元素的宽度。

$("button").click(function(){ 
        $("p").width(function(n,c){ 
        return c+10;
        });
      });

`注意`：以下所有示例的HTML代码为：

<p>Hello</p><p>world</p>

*  `innerHeight()`：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
    $("p:last").text( "innerHeight:" + p.innerHeight() );

*  `innerWidth()`：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
    $("p:last").text( "innerWidth:" + p.innerWidth() );

*  `outerHeight()`：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。参数设置为 true 时，计算边距在内。

var p = $("p:first");
    $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

*  `outerWidth()`：获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。参数设置为 true 时，计算边距在内。

var p = $("p:first");
    $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

*  `offset([coordinates])`：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。方法只对可见元素有效。值对：比如 \{top:100,left:0\}

代码①：

var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " + offset.left + ", top: " + offset.top );

代码②：

$("p:last").offset({  top: 10, left: 30 });

*  `position()`：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

var p = $("p:first");
    var position = p.position();
    $("p:last").html( "left: " + position.left + ", top: " + position.top );

--------------------

jQuery选择器及jQuery基本操作

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JQuery 基本过滤选择器

相关 jQuery：基本选择器

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

相关 jQuery选择器及jQuery基本操作

相关 jquery基本选择器

相关 Jquery选择器-基本选择器

相关【JQuery】熟能生巧JQuery（四）——基本选择器

相关 jQuery_基本选择器

相关 jQuery 基本选择器

相关 jQuery选择器之基本选择器