JQuery选择器详解

2024-10-12 20:53:42

基本选择器：

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。

例如：id 选择器、类选择器、元素选择器、属性选择器等等。

jQuery 中选择器的语法：$();

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
</head>
<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.元素选择器   $("元素的名称")
    let divs = $("div");
    //alert(divs.length);
    //2.id选择器    $("#id的属性值")
    let div1 = $("#div1");
    //alert(div1);
    //3.类选择器     $(".class的属性值")
    let cls = $(".cls");
    alert(cls.length);
</script>
</html>

层级选择器：

代码实现：

<body>
<div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
    <span>s2</span>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    let spans1 = $("div span");
    // alert(spans1.length);
    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let spans2 = $("div > span");
    // alert(spans2.length);
    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let ps1 = $("div + p");
    // alert(ps1.length);
    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    let ps2 = $("div ~ p");
    alert(ps2.length);
</script>

属性选择器：

代码实现：

<body>
<input type="text">
<input type="password">
<input type="password">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    let in1 = $("input[type]");
    //alert(in1.length);
    //2.属性值选择器   $("元素[属性名=属性值]")
    let in2 = $("input[type='password']");
    alert(in2.length);
</script>

过滤器选择器：

代码实现

<body>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());
    // 2.尾元素选择器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());
    // 3.非元素选择器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);
    // 4.偶数选择器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);
    // 5.奇数选择器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);
    // 6.等于索引选择器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());
    // 7.大于索引选择器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);
    // 8.小于索引选择器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
</script>

表单属性选择器：

代码实现：

<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);
    // 2.不可用元素选择器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);
    // 3.单选/复选框被选中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);
    // 4.下拉框被选中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
</script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

jquery标签选择器应用示例详解

本文实例为大家分享了jquery标签选择器应用的具体代码,供大家参考,具体内容如下 1.统一设置div内容可以用标签选择器来选择所有的 div 元素; <!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> &
jQuery属性选择器用法实例分析

本文实例讲述了jQuery属性选择器用法.分享给大家供大家参考,具体如下: 属性选择器在HTML文档中,元素的开始标记中通常包含有多个属性(attribute) <input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" /> 在jQuery中,除了直接使用id和class属性作
jquery实现时间选择器

本文实例为大家分享了jquery实现时间选择器的具体代码,供大家参考,具体内容如下效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" c
jquery选择器和属性对象的操作实例分析

本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ
jQuery 选择器用法基础入门示例

本文实例讲述了jQuery 选择器用法.分享给大家供大家参考,具体如下: 今儿个开始学习jQuery,在学习jQuery之前我们应该掌握js,我之前也写过几篇笔记,但是只是小部分的知识,js也不是很难可以自己简单的看看.以后写js会经常用到jQuery这个库. 1 安装jQuery 1.1 从官网下载可以从 jQuery.com 下载.有两个版本可以选择: production:被精简压缩过,常用于实际网站. development:源码,可读性高,常用于开发阶段. 1.2 CDN引入百度
jQuery表单选择器用法详解

表单选择器 1. :button Selector 1. jQuery(":button") 2. 选择所有元素和类型为按钮的元素 2. :checkbox Selector 1. jQuery(":checkbox") 2. 选择所有元素和类型为复选框的元素 3. :checked Selector 1. jQuery(":checked") 2. 选择所有有勾选的元素 4. :disabled Selector 1. jQuery("
jQuery的实例及必知重要的jQuery选择器详解

Jquery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合 Jquery的优势体积小,压缩后只有100KB左右 l强大的选择器出色的DOM封装 l可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持 jQuery的知识的分解: 1.关于window.onload和$(function(){})区别解析:window.onload等待页面上所有资源(ht
jQuery 选择器详解

$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本
JQuery选择器详解

目录基本选择器: 层级选择器: 属性选择器: 过滤器选择器: 表单属性选择器: 总结选择器类似于CSS的选择器,可以帮助我们获取元素基本选择器: 选择器:类似于 CSS 的选择器,可以帮助我们获取元素. 例如:id 选择器.类选择器.元素选择器.属性选择器等等. jQuery 中选择器的语法:$(); 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
jQuery过滤选择器详解

过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器基本过滤选择器示例改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa
原生js封装的一些jquery方法(详解)

用js封装一些常用的jquery方法记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
YII框架中搜索分页jQuery写法详解

控制层 use frontend\models\StudUser; use yii\data\Pagination; use yii\db\Query; /** * 查询 * */ public function actionSearch() { //接值 $where=Yii::$app->request->get(); //实例化query $query=new Query(); $query->from('stud_user'); //判断 if(isset($where['sex
jQuery extend()详解及简单实例

jQuery extend()详解及简单实例使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码:实例
jQuery选择器及jquery案例详解(必看)

JQuery选择器解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签 1.层次选择器  <!-- <script type="text/javascript"> $(function () { $('h2').click(function () { $('#menu span').css('background-color','#0
jQuery常用选择器详解

本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下 1.jQuery:(使用jQuery一定标明我们使用的版本号) 它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题) 2.jQuery中提供的方法选择器通过传递对应规则的内容(ID.标签名.样式类名...),获取到页面中指定的元素/元素集合 <!DOCTYPE html> <html lang="en"> <head> <meta charset
jQuery选择器之属性过滤选择器详解

本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t

JQuery选择器详解

目录

基本选择器：

层级选择器：

属性选择器：

过滤器选择器：

表单属性选择器：

总结

相关推荐

随机推荐