jquery选择器有哪些-如何使用 jQuery 的伪类选择器

本文主要介绍“如何使用jquery的伪类选择器”的相关知识。 小编通过实际案例为您展示操作流程。 操作方法简单、快捷、实用。 使用”文章可以帮助您解决问题。

jQuery的伪类选择器： 1.位置选择器，根据页面中的位置选择元素； 2、子元素选择器，选择某个元素下的子元素； 3、可见性选择器，选择元素是否可见选择元素； 4.内容选择器，根据元素或子元素的内部文本选择元素； 5.表单选择器，用于操作表单元素； 6.表单属性选择器jquery选择器有哪些，根据表单元素的属性进行选择 当然。

本教程的运行环境：windows10系统，jquery3.2.1版本，戴尔G3笔记本。

jquery 的伪类选择器

伪类选择器可以看作是一种特殊的选择器。 伪类选择器以中文破折号开头：。 jQuery参考CSS伪类选择器为我们提供了大量的伪类选择器。

常用的伪类选择器包括以下6种类型。

1.“位置”伪类选择器。

“位置”伪类选择器是指根据元素在页面上的位置来选择元素的伪类选择器。 在 jQuery 中，常见的“位置”伪类选择器如表所示。

例子：

    
    
    
    
        $(function () {
            $("li:first,li:last").css("color", "red");
        })
    


    

        
HTML
        
CSS
        
JavaScript
        
jQuery
        
Vue.js
    

程序执行的效果如图所示：

2.“子元素”伪类选择器。

“子元素”伪类选择器是指选择某个元素下的子元素的伪类选择器。 选择子元素是 jQuery 中最常用的操作之一。

在jQuery中，“子元素”伪类选择器有以下两类。

3.“可见性”伪类选择器。

“可见性”伪类选择器是指根据“可见”和“不可见”两种状态来选择元素的伪类选择器。在jQuery中，有两种“可见性”伪类选择器

所谓不可见元素是指定义了display:none的元素。

4.“内容”伪类选择器。

“content”伪类选择器是指根据元素内部文本或子元素来选择元素的伪类选择器。在jQuery中jquery选择器有哪些，常用的“content”伪类选择器

5.“Form”伪类选择器。

“表单”伪类选择器是指专门对表单元素进行操作的伪类选择器。

6.“表单属性”伪类选择器。

“表单属性”伪类选择器是指根据表单元素的属性选择的伪类选择器。

关于“如何使用jquery的伪类选择器”的内容就介绍到这里，感谢您的阅读。 如果您想了解更多行业相关知识，可以关注易速云行业资讯频道，小编每晚都会为您更新不同的知识点。

jQuery实现全选取消选择操作案例

于2021-08-10 14：02：11更新作者：快来晾干这碗代码

本文主要为大家详细介绍所有选择操作案例的jQuery实现，文中的示例代码非常详细，有一定的参考价值，有兴趣的可以参考

本文示例分享jQuery实现全选取消选择操作的具体代码供大家参考jquery 反选，具体内容如下

全选 + 反向选择

您可以结合控制台查看结果

    
    
    
    
    


    

        

            

            
剑圣
            
450
        
        

            

            
剑豪
            
6300
        
        

            

            
剑姬
            
6300
        
        

            

            
剑魔
            
6300
        
    
 
    
    
    
    
    
    
    

        $(function() {
            //jQuery 使用过滤选择器 达到 奇偶数变色
            $("table tr:even").css('background-color','pink');
            $("table tr:odd").css('background-color','blue');
            // 
            
            // 拿去第一个
            $("#firstBtn").click(function() {
                var first = $("table tr:first").html();
                console.log(first);  
            })
             // 拿取最后一个
             $("#lastBtn").click(function() {
                var last = $("table tr:last").text();
                console.log(last);  
            })
            // 全选 ---- 用来批量删除
            $("#allBtn").click(function() { 
                // 思路找出所有 checkbox的 td 进行遍历 选中即可 
                $.each($("table tr td>input"), function(index, value) {
                  //  console.log(index);   
                  //  console.log(value);
                    console.log($(this).val()); // 遍历取值
                    $(this).prop('checked',true); // 全选
                })
            }) 
            // 点击查看已经选中的
            $("#checkBtn").click(function() { 
                // 使用过滤选择器 可以选中 :
                $("table tr td>input:checked")
                $.each($("table tr td>input:checked"), function(index, value) {
                    
                    console.log($(this).val()); // 遍历取值
                    
                })
            
            }) 
            // 点击查看未选中的
            $("#nocheckBtn").click(function() { 
                console.log($("table tr td>input:not(:checked)"))
            })
            // 反选
            $("#overBtn").click(function() { 
                $.each($("table tr td>input"), function(index, value) {
                    var istrue =$(this).prop("checked");
                    //console.log(value.checked = !value.checked); // 遍历取值
                   if(istrue){
                        $(this).prop("checked",false);
                   } else{
                    $(this).prop("checked",true);
                   }
                })   
            })     
            // 升级版的全/反选
            $("#overBtn1").click(function() { 
                $.each($("table tr td>input"), function(index, value){
                $(this).prop("checked",!$(this).prop("checked"))
                })
            })
    })  

本文以上就是这些内容，希望

对你的学习有所帮助jquery 反选，也希望大家对脚本屋的大力支持。