jquery概念、引入、选择器

最新推荐文章于 2020-11-19 20:11:53 发布
最新推荐文章于 2020-11-19 20:11:53 发布
阅读量103 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48846877/article/details/107370602
版权

一、jquery 简介

1. 什么是jquery

1. jquery：是一个轻量级的js库
2. jQuery库包含以下功能：

1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
8.Utilities

3. jquery的优点跟特征

jquery的优点:写的少做的多
jquery的特征:
1.强大的元素选择器:使用的是css1-css3所有选择器
2.简化了dom操作
3.优化了事件机制
4.ajax
5.插件

二、jquery语法

1.先看jquery源码
源码中：
window.jQuery==window.$=jQuery
jQuery在源码是一个函数，该函数内部返回 jQuery.fn.init 对象
jQuery.fn=jQuery.prototype
2.使用jquery：
a. 标识符： $ 或 jQuery + () 执行
b. 要使用jquery 需要先引入jquery 的库
如果元素初始化了，直接写jquery代码。如果元素未初始化，写dom加载完成事件

dom加载完成事件

<body>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(window).ready(function (){
        console.log("dom加载完成");
    });
    //简写
    $(function (){
        console.log("简写");
    });
</script>
</body>

三、jquery引入方法

1.本地引入：

<body>
<script src="./js/jquery-1.9.1.js"></script>
</body>

2.远程引入：

<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</body>

3.引入cdn:

<body>
<script src="js/jquery-1.9.1.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</body>

四、jquery选择器

1. 基本

  • *选择器

匹配所有元素，找到每一个元素

<body>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("*"));
</script>
</body>

匹配所有元素，找到每一个元素

  • element选择器

根据给定的元素标签匹配所有元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("button"));
</script>
</body>

根据给定的元素标签匹配所有元素

  • class选择器

根据给定的css类名匹配元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".btn"));
</script>
</body>

根据给定的css类名匹配元素

  • id选择器

根据给定的ID匹配一个元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#an1"));
</script>
</body>

根据给定的ID匹配一个元素

  • 复合选择器

将每一个选择器匹配到的元素合并后一起返回

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#an1,#an2"));
</script>
</body>

将每一个选择器匹配到的元素合并后一起返回

2. 层级

  • 匹配所有ul里面的li

在给定的祖元素下匹配所有后代元素

<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul li"));
</script>
</body>

在这里插入图片描述

  • 匹配ul.menu里面所有的li

在给定的父元素下匹配所有的子元素

<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li"));
</script>
</body>

在这里插入图片描述

  • 匹配ul.menu里面li的第一个子集紧跟其后的元素

:nth-child 匹配其父元素下的第N个子或奇偶元素

  • 匹配紧跟其后的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:nth-child(1)+li"));
</script>
</body>

在这里插入图片描述

  • 匹配ul.menu里面li的第一个子集里面所有的元素
    ~ 匹配元素之后所有的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:nth-child(1)~li"));
</script>
</body>

在这里插入图片描述

  • 获取.menu里面li的第一个元素
    :first 获取第一个元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:first"));
</script>
</body>

在这里插入图片描述

  • 获取.menu里面li的第一个子元素
    :first-child 匹配所给选择器的第一个子元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:first-child"));
</script>
</body>

在这里插入图片描述

  • 去除.menu里面的li的.child元素
    :not(selector) 去除所有与给定选择器匹配的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:not(.child)"));//:not(selector)
</script>
</body>

在这里插入图片描述

  • 匹配.menu里面li所有为偶数的元素
    :even 匹配所有索引值为偶数的元素，从0开始计数
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:even"));
</script>
</body>

在这里插入图片描述

  • 匹配.menu里面li所有为奇数的元素
    :odd 匹配所有索引值为偶数的元素，从0开始计数
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu>li:odd"));
</script>
</body>

在这里插入图片描述

  • 匹配.menu里面的li的索引值为3的元素
    匹配一个给定索引值的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".menu>li:eq(3)"));
</script>
</body>

在这里插入图片描述

  • 匹配.menu里面的li的索引值小于2的元素
    匹配所有小于给定索引值的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".menu>li:lt(2)"));
</script>
</body>

在这里插入图片描述

  • 匹配.menu里面的li的索引值大于2的元素
    匹配所有大于给定索引值的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(".menu>li:gt(2)"));
</script>
</body>

在这里插入图片描述

3.基本筛选器

  • :header
    匹配如 h1, h2, h3之类的标题元素
<body>
<h1>1111</h1>
<h2>2222</h2>
<h3>3333</h3>
<h4>4444</h4>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("body :header"));
</script>
</body>

在这里插入图片描述

  • :root
    选择该文档的根元素，永远是元素
<body>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(":root"));
</script>
</body>

在这里插入图片描述

-:focus
匹配当前获取焦点的元素

<head lang="en">
    <title></title>
    <style>
        input:focus{
            color: red;
        }
    </style>
</head>
<body>
<input type="text" id="user" class="ipt"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("input").focus(); //默认获得焦点
    console.log($("body :focus"));
</script>
</body>

在这里插入图片描述

4.内容

  • 查找ul所有li中包含2的文本，包含你的文本
    匹配包含给定文本的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul li:contains(2)"));
    console.log($("ul li:contains(你)"));
</script>
</body>

在这里插入图片描述
在这里插入图片描述

  • 匹配.menu里面.child元素
    匹配含有选择器所匹配的元素的元素
<body>
<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
            <li>第二</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("ul.menu:has(.child)"));
</script>
</body>

在这里插入图片描述

  • 匹配不包含子元素或者文本的空元素的div
    匹配所有不包含子元素或者文本的空元素
<body>
<div></div>
<div>

</div>
<div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("div:empty"));
</script>
</body>

在这里插入图片描述

  • 匹配含有子元素或者文本的元素的div
    匹配含有子元素或者文本的元素
<body>
<div></div>
<div>

</div>
<div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("div:parent")); //匹配的元素必须有子元素或者 内容
</script>
</body>

在这里插入图片描述

5.可见性

  • :hidden

匹配所有不可见元素，或者type为hidden的元素

<head lang="en">
    <title></title>
    <style>
        button{
            display: none;
        }
    </style>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(":hidden"));
</script>
</body>

在这里插入图片描述

  • :visible
    匹配所有的可见元素
<head lang="en">
    <title></title>
    <style>
        button{
            display: none;
        }
    </style>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($(":visible"));
</script>
</body>

在这里插入图片描述

6.属性

  • 匹配含有type属性的元素
    匹配包含给定属性的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type]"));
</script>
</body>

在这里插入图片描述

  • 查找所有type的属性是text的input元素
    匹配给定的属性是某个特定值的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type='text']"));
</script>
</body>

在这里插入图片描述

  • 查找所有type以t开始的input元素
    匹配给定的属性是以某些值开始的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type^='t']"));
</script>
</body>

在这里插入图片描述

  • 查找所有type以t结尾的input元素
    匹配给定的属性是以某些值结尾的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type$='t']"));
</script>
</body>

在这里插入图片描述
-查找所有type中包含x的input元素
匹配给定的属性是以包含某些值的元素

<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type*='x']"));
</script>
</body>

在这里插入图片描述

  • 找到所有含有type class id属性的元素
    复合属性选择器，需要同时满足多个条件时使用
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("input[type][class][id]"));
</script>
</body>

在这里插入图片描述

7. 子元素

  • :first-child :last-child
    :first-child 匹配第一个子元素
    :last-child 匹配最后一个子元素
<body>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#nav>li:first-child"));
    console.log($("#nav>li:last-child"));
</script>
</body>

在这里插入图片描述

  • :first-of-type :last-of-type
    :first-of-type 匹配ul里面li里的第一个子元素
    :last-of-type 匹配ul里面li里的最后一个子元素
<body>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#nav>li:first-of-type"));
    console.log($("#nav>li:last-of-type"));
</script>
</body>

在这里插入图片描述

  • :nth-child :nth-last-child
    :nth-child(3) 匹配#nav里面li所有元素的第三个元素
    :nth-last-child(2) 匹配#nav里面li所有元素的倒数第二个元素
<body>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#nav>li:nth-child(3)"));
    console.log($("#nav>li:nth-last-child(2)"));
</script>
</body>

在这里插入图片描述

  • :nth-of-type :nth-last-of-type
    :nth-of-type(2) 匹配#nav里面li子集的第二个元素
    :nth-last-of-type(2) 匹配#nav里面li子集的倒数第二个元素
<body>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    console.log($("#nav>li:nth-of-type(2)"));
    console.log($("#nav>li:nth-last-of-type(2)"));
</script>
</body>

在这里插入图片描述

8.表单

  • :input 匹配所有 input, textarea, select 和 button 元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":input"));
</script>
</body>

在这里插入图片描述

  • :text 匹配所有的单行文本框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":text"));
</script>
</body>

在这里插入图片描述

  • :password 匹配所有密码框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":password"));
</script>
</body>

在这里插入图片描述

  • :radio 匹配所有单选按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":radio"));
</script>
</body>

在这里插入图片描述

  • :checkbox 匹配所有复选框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":checkbox"));
</script>
</body>

在这里插入图片描述

  • :submit 匹配所有提交按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":submit"));
</script>
</body>

在这里插入图片描述

  • :image 匹配所有图像域
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":image"));
</script>
</body>

在这里插入图片描述

  • :reset 匹配所有重置按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":reset"));
</script>
</body>

在这里插入图片描述

  • :file 匹配所有文件域
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":file"));
</script>
</body>

在这里插入图片描述

9. 表单对象属性

  • :disabled 匹配所有不可用元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($("input:disabled"));
</script>
</body>

在这里插入图片描述

  • :enabled 匹配所有可用元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($("input:enabled"));
</script>
</body>

在这里插入图片描述

  • :checked 匹配所有选中的被选中元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($("input[type=radio]:checked"));
</script>
</body>

在这里插入图片描述

  • :selected 匹配所有选中的option元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($("select>option:selected"));
</script>
</body>

在这里插入图片描述

10. 混淆选择器

对含有#号的ID进行编码

<body>
<span id="#span">特殊字符</span>
<span class="+span">特殊字符</span>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //$.escapeSelector("#span")   3.0+
    console.log($.escapeSelector("#span"));    //   \#span
    console.log($("#"+$.escapeSelector("#span")));
    console.log($("."+$.escapeSelector("+span")));
</script>
</body>

在这里插入图片描述

weixin_48846877
关注
专栏目录
初步学习jQuery的概念及选择器
10-29
初步学习jQuery的概念及选择器 jQuery是一个功能强大且流行的JavaScript库，它提供了许多实用的方法来简化网站开发和交互设计。 本文将对jQuery的基本概念和选择器进行介绍，旨在帮助读者快速掌握jQuery的基础知识...
jQuery日期时间选择器插件.zip
07-11
在本文中，我们将深入探讨jQuery日期时间选择器插件，这是一种高效、美观的JavaScript解决方案，用于在网页上添加交互式的日期和时间选择功能。这款插件利用jQuery库的强大功能，为用户提供了简单易用的界面，使他们...
jquery获取第一个子元素
qq_35226176的博客
02-22 4万+
如获取id为divId的div下的第一个子div 1 $("#divId").children(“div”).get(0) 但得到的是一个dom对象，如果要得到Jquery对象，要使用 1 (((("#divId").children(“div”).get(0)) Jquery对象 和 dom对象 有区别？ jquery获取第一个子节点元素 获取第一个元素 $("#body").children(...
Jquery 获取第一个子元素
06-15 316
<ul><li>John</li><li>Karl</li><li>Brandon</li></ul> 获取第一个元素：$("ul li:first-child") <div id="getfirst"> <ul><li>...
jQuery分组选择器简单用法示例
12-03
jQuery支持多种选择器，包括基本选择器（如ID选择器、类选择器和元素选择器）、层级选择器（如后代选择器、子元素选择器和相邻兄弟选择器）、属性选择器（如 `[attribute=value]`）、伪类选择器等。在上述示例中，...
jQuery表情符号选择器特效代码
03-20
**jQuery表情符号选择器特效代码详解** 在网页开发中，为用户提供丰富的表情符号选择功能能够增强用户互动体验，尤其在社交应用或者评论系统中。jQuery作为一款轻量级的JavaScript库，提供了方便快捷的方式来实现这...
jquery入门—选择器实现隔行变色实例代码
11-30
此外，jQuery还引入了一些特有的选择器，如`:even`和`:odd`，用于选取偶数或奇数索引的元素，这在实现隔行变色等效果时非常有用。 2. jQuery选择器的优势： 相比于传统的JavaScript DOM操作，jQuery选择器具有以下...
jQuery简介 使用 选择器（基础选择器、 过滤选择器、关系选择器）元素操作（Css设置、文本操作、表单值的操作、属性操作、类class属性的操作）相关尺寸 事件 节点操作
langdei的博客
08-25 357
一.jQuery简介 版本选择 简介： Jquery是原生js的封装库 将原生js方法进行封装简化了原生js的操作 1.1.x版本 2.2.x版本 3.3.x版本 2.x 和3.x 不兼容低版本浏览器 二.Jquery的使用： 导入库文件 在header标签内导入库文件 <script src="D:/html文件夹/jquery-1.8.3.min.js"></script...
关于DOM4J对xml的解析步骤
weixin_44835937的博客
09-08 400
DOM4J解析XML 掌握 步骤: 1. //引入jar文件 dom4j.jar 2. //创建一个指向XML文件的输入流 3. FileInputStream fis = new FileInputStream("xml文件的地址"); 4. //创建一个XML读取工具对象 5. SAXReader sr = new SAXReader(); 6. //使用读取工具对象, 读取XML文档的输入流 , 并得到文档对象 7. Document doc = sr.read(fis); 8. //通
jquery获得$(this)下面的指定的子元素
热门推荐
weixin_zsh的博客
08-25 6万+
有时候会遇到循环出来的div，实现用户点击其中一个，据此进行其他操作，我们可以用$(this)来获取用户点击的div，但是如果没有其他的标志来区分这些循环出来的div的话（比如lang值的不同），我们如何获得点击的div的子元素呢？ 方法有两种，都是jQuery中获得子元素的方法------- .find ()  和  .children () find查找所有的子元素，会一直查找，跨层级查找...
jquery获取div里面的第一个子元素方法总结
u010227447的专栏
05-04 3万+
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">          My JSP 'index.jsp'
JQuery获取元素第一个子元素并判断第一个子元素下面是否有某个标签
撑起自己半边天
11-18 973
JQuery获取元素第一个子元素并判断第一个子元素下面是否有某个标签 首先获取某个元素下面的第一个子元素，下面以ul li为例子： //获取ul下面的第一个li var firstchild = $(".product-list ul").find('li:first-child') //然后判断第一个li里面是否含有img标签 if (firstchild.has('img').length>0) { code... } //要注意的是，可能会有一些小伙伴判断会继续用.find()；这个是行不通
Jquery 获取第一个子元素 几种写法
08-29 356
<ul><li>John</li><li>Karl</li><li>Brandon</li></ul> 获取第一个元素：$("ul li:first-child") <di...
这 16 个 CSS 伪类，助你提升布局效率！
粉丝们务必加入微信粉丝群
09-14 5665
作者：Chidume Nnamdi 译者：前端小智 来源：mediuum 点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 这篇文章.
jquery 移动到对应元素_JS中获取元素属性的8大方法
weixin_39771969的博客
11-19 329
今天想聊聊在Web前端开发中经常用到的技术：获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】这些方法，大家应该用过，如果让你说出它们的一些区别和联系，能答得上来吗？接下来让我们一起来温故下。首先我们需要把它们归类下：innerHTML、outerHTML、innerText 、outer...
jQuery基础与选择器实战教程
"jQuery基础+选择器教程，涵盖jQuery的基本概念、DOM操作、选择器的使用等核心内容，旨在帮助学习者掌握jQuery的核心功能。" jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值