02-jQuery的选择器

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

今天来学习一下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>

效果如下：

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

HTML 学习笔记 JQuery（选择器）
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
Web前端JQuery入门实战案例
前端jquery入门到实战为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
Web前端JQuery面试题（二）
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
Web前端JQuery面试题（一）
Web前端JQuery面试题(一) 一:选择器基本选择器什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象对象 : 属性和方法某个对象中 function $( ...
前端 jQuery副本
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
前端——jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
前端-jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

随机推荐

Linux 三剑客 -- awk sed grep
本文由本人收集整理自互联网供自己与网友参考,参考文章均已列出,如有侵权,请告知! 顶配awk,中配sed,标配grep awk 参考 sed 参考 grep 参考在线查看linux命令速记表 app ...
IO流----操作文件的9种方法代码实现
IO流----操作文件的9种方法代码实现: 1:使用字节流读写数据: 四种方式: method1: 每次读写一个字节,边读边写: /* * 复制文本文件. * * 数据源:从哪里来 ...
引用mchange-commons-java-0.2.3.4.jar架包
pom.xml中增加  <de ...
Windows Server 2008 R2中无法使用360免费Wifi的解决方案
为了使主机和虚拟机在同一个无线网络中,而虚拟机的系统是Windows Server 2008 R2 64位的,使用360免费wifi,始终无法开启.在网上查找解决方案,终于找到了原因:Windows ...
网易PM599产品笔试题
前几天做了网易PM599的云计算领域产培生的笔试题目,下面整理了一下各个方向的笔试题和我对这些题目的解答. 云计算领域: 1.对工业互联网的理解,结合自身优势谈谈自己应该怎么去创业. 工业互联网是一次 ...
jquery判断点击鼠标左、中、右键事件
注:1为鼠标左键.2为鼠标中键.3为鼠标右键$('#btn').mousedown(function(e){ if(3 == e.which){ al ...
Java基础_0302：类和对象
定义类 class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 /** * 输出对象完整信息 */ public voi ...
delegate事件委托
下面举个例子我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...
微服务之Spring cloud
微服务 Spring cloud Spring Cloud provides tools for developers to quickly build some of the common patt ...
Git——如何将本地项目提交至远程仓库
参考文章:http://blog.csdn.net/dadaxiongdebaobao/article/details/52081826 git 将一个本地文件目录提交到远程仓库的步骤参考文章: ...

前端 -----jQuery的选择器

02-jQuery的选择器

1、jQuery 的基本选择器

2、层级选择器

3、基本过滤选择器

4、属性选择器

5.筛选选择器

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

随机推荐

热门专题