我们以前在CSS中学习的选择器有：

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

1、jQuery 的基本选择器

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

1、jQuery 的基本选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div></div>

    <div id="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div></div>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        //入口函数

        $(function(){

            //三种方式获取jquery对象

            var jqBox1 = $("#box");

                   var jqBox2 = $(".box");

            var jqBox3 = $('div');

            //操作标签选择器

            jqBox3.css('width', '100');

            jqBox3.css('height', 100);

            jqBox3.css('background-color', 'red');

            jqBox3.css('margin-top', 10);

            //操作类选择器(隐式迭代，不用一个一个设置)

                    jqBox2.css("background", "green");

                    jqBox2.text('哈哈哈')

                    //操作id选择器

                    jqBox1.css("background", "yellow");

        })

    </script>

</body>

</html>

效果如下：

2、层级选择器

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(function () {

            //获取ul中的li设置为粉色

            //后代：儿孙重孙曾孙玄孙....

            var jqLi = $("ul li");

            jqLi.css("margin", 5);

            jqLi.css("background", "pink");

            //子代：亲儿子

            var jqOtherLi = $("ul>li");

            jqOtherLi.css("background", "red");

        });

    </script>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <ol>

        <li>aaa</li>

        <li>bbb</li>

        <li>ccc</li>

    </ol>

</ul>

</body>

</html>

3、基本过滤选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>基本过滤选择器</title>

    </head>

    <body>

        <ul>

            <li>哈哈哈哈，基本过滤选择器</li>

            <li>嘿嘿嘿</li>

            <li>天王盖地虎</li>

            <li>小鸡炖蘑菇</li>

        </ul>

    </body>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //获取第一个 :first ,获取最后一个 :last

            //奇数

            $('li:odd').css('color','red');

            //偶数

            $('li:even').css('color','green');

            //选中索引值为1的元素 *

            $('li:eq(1)').css('font-size','30px');

            //大于索引值1

            $('li:gt(1)').css('font-size','50px');

            //小于索引值1

            $('li:lt(1)').css('font-size','12px');

        })

    </script>

</html>

4、属性选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <h2 class="title">属性元素器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">分手应该体面</li>

                <li class="what" id="li2">分手应该体面</li>

                <li class="what">分手应该体面</li>

                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>

                <input name="username1111" type='text' value="1"></input>

                <input name="username2222" type='text' value="1"></input>

                <input name="username3333" type='text' value="1"></input>

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮1</button>

                <button class="btn-success">按钮1</button>

                <button class="btn-danger">按钮1</button>

            </form>

        </div>

    </body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

            //匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

</html>

5.筛选选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <p class="p1">

                <span>我是第一个span标签</span>

                <span>我是第二个span标签</span>

                <span>我是第三个span标签</span>

            </p>

            <button>按钮</button>

        </div>

        <ul>

            <li class="list">2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        //获取第n个元素 数值从0开始

        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  ：get方法 和set方法

        $('span').last().css('color','greenyellow');

        $('span').first().css('color','greenyellow');

        //查找span标签的父元素（亲的）

        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});

        //选择所有的兄弟元素（不包括自己）

                  $('.list').siblings('li').css('color','red');

                //查找所有的后代元素

                   $('div').find('button').css('background','yellow');

                //不写参数代表获取所有子元素。

                   $('ul').children().css("background", "green");

                   $('ul').children("li").css("margin-top", 10);

    </script>

</html>

02-jQuery的选择器的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. Spring------生命周期

    Spring------生命周期 转:https://blog.csdn.net/qq_42112846/article/details/81368862 如图所示: 一下就是对上图的解释: Spri ...

  2. 安装jdk1.9后报 Error:java: 无效的源发行版: 1.9

    现象: intillj IDE 运行main方法 Information:javac 1.8.0_101 was used to compile java sources Error:java: 无效 ...

  3. leetcode142

    public class Solution { public ListNode detectCycle( ListNode head ) { if( head == null || head.next ...

  4. JDBC 连接mysql数据库

    JDBC 连接mysql数据库jar包:mysql-connector-java-5.1.47.jar 下载:mysql-connector-java-5.1.47.jar jdbc:java dat ...

  5. RGB ECT 4BIT 压缩后质量远高于RGB ETC2 4BIT

    今天突然发现这个.原来以为ETC2在任何方面都强于ETC,没想到...用了RGB ETC2 4BIT 压缩的贴图看起来有点糊,改用RGB ECT 4BIT后竟然非常清晰,而且大小与RGB ECT2 4 ...

  6. 2019最新整理PHP面试题附答案

    1.什么事面向对象?主要特征是什么?面向对象是程序的一种设计方式,它利于提高程序的重用性,使程序结构更加清晰.主要特征:封装.继承.多态. 2.SESSION 与 COOKIE的区别是什么,请从协议, ...

  7. 请求不同域的数据方法:requests Jsonp cors

    在需要访问不同域的接口的数据的时候,一般有两种方式: 第一种: 使用requests模块,在业务逻辑中直接访问别的域的接口,获取数据,然后将返回的数据显示到前端页面上; 这个时候,数据访问的流程是: ...

  8. ArcGIS自定义工具箱-修复损坏的工作空间

    ArcGIS自定义工具箱-修复损坏的工作空间 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:替换数据源的工作空间 用途:针对损坏的数据源,批量进行修复 案例数 ...

  9. hdu2089-不要62-（数位dp）

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. aptana怎么显示空格 tab和回车等