首页 文章 精选 留言 我的

全面入门jQuery最佳实践(一)-选择器

2018-07-15 534

1 初识JQuery

1.1 简介

img_4d226216c9838552ebfbdd38cc34d61d.png

img_3cc745ee858b1d7983df86feaa5e200f.png

img_b81555919a2fe12713d808c6a0f29890.png

img_3cf05dea171451fed14193eb3ab855da.png

1.2 环境搭建

进入官方网站获取最新的版本 http://jquery.com/download/ ，这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。

如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。为了兼容性问题，使用的是 1.9 版本。jQuery 每一个系列版本分为：压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <title>环境搭建</title>
</head> 
<body>
    <script type="text/javascript"> alert($) </script>
</body>
</html>
img_0e074d0183d30edd2f49819d8887871b.png
验证成功

1.3 jQueryHelloWorld体验

当页面加载完成后，在页面中以居中的方式显示“您好”字样。


img_98b69cb65f61c062f3e7f9c0b01fe907.png
  • 代码分析
    $(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

1.4 jQuery对象与DOM对象

img_0d778e58e0d6732632e44a1d02016ef8.png

jQuery对象与DOM对象是不一样的
可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。

通过一个简单的例子，简单区分下jQuery对象与DOM对象：

<p id=”sss”></p>

我们要获取页面上这个id为sss的p元素，然后给这个文本节点增加一段文字：“您好”，并且让文字颜色变成红色。

  • 普通处理，通过标准JavaScript处理：
var p = document.getElementById('sss');
p.innerHTML = '您好';
p.style.color = 'red';

通过原生DOM模型提供的document.getElementById(“sss”) 获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

  • jQuery的处理：
var $p = $('#sss');
$p.html('您好').css('color','red');

通过$('#sss')会得到一个$p的jQuery对象，$p是一个类数组对象。
这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的

通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

  • 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM
  • 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

1.5 jQuery对象转化成DOM对象

img_24862f4ac11cfbaf504c732b5ac9ae97.png

jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。
我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象？

  • 利用数组下标的方式读取到jQuery中的DOM对象


    img_6a8cbff6ee949536e1c2f4ccabd8a121.png

    img_97b31e97fa99e42e1eaa2f7c561a5100.png

    用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色

  • 通过jQuery的get()
    允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
    img_40b6af948b40ff00f45709aa5ea0bfe0.png

    其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

1.6 DOM对象转化成jQuery对象

img_0a43d2221fba9db2370bfc01129e2385.png

$(参数)是一个多功能的方法
参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

img_35145ed19db0dc9dd1df6c07dae888af.png

img_5717d435690165e5e9c026497edc791c.png
JavaScript代码

通过 getElementsByTagName获取到所有div节点的元素，结果是一个dom集合对象，不过这个对象是一个数组集合(3个div元素)
通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色

2 jQuery选择器

2.1 id选择器

id选择器：一个用来查找的ID，即元素的id属性
$( "#id" )
id选择器也是基本的选择器，jQuery内部使用JS函数document.getElementById()来处理ID的获取。
原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素

2.2 类选择器

通过class样式类名来获取节点
$( ".class" )
相对id选择器来说，效率相对会低一点，但是优势就是可以多选

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较

jQuery除了选择上的简单，而且没有再次使用循环处理
不难想到$(".SSS").css()方法内部肯定是带了一个隐式的循环处理，所以使用jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作

2.3 元素选择器

根据给定（HTML）标记名称选择所有的元素
$( "element" )
搜索指定元素标签名的所有节点，这个是一个合集的操作,原生方法getElementsByTagName()

  • 第一组：通过getElementsByTagName得到页面所有的<div>
    var divs = document.getElementsByTagName('div');
    divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的border样式
  • 第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式

2.4 全选择器（*选择器）

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素
$( "*" )
抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到

id、class、tag都可以通过原生的方法获取到对应的节点，但还需考虑一个兼容性问题，这里顺便提及一下，比如

  • IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName会包含注释节点，这个通常是不应该的
  • getElementById的参数在<=IE8不区分大小写
  • <=IE7中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
  • <=IE8，浏览器不支持getElementsByClassName

幸好有jQuery的出现，让我们省了很多功夫

2.5 层级选择器

文档中的所有的节点之间都是有这样或者那样的关系
我们可以把节点之间的关系可以用传统的家族关系来描述，把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系

img_f60dc30085212c71d27169076e344805.jpe
对比层级选择器的区别

  • 层级选择器都有一个参考节点
  • 后代选择器包含子选择器的选择的内容
  • 一般兄弟选择器包含相邻兄弟选择的内容
  • 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

2.6 基本筛选选择器

筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

筛选选择器的用法与CSS中的伪元素相似

img_46deca088260078bd27a63d62ad13517.jpe

  • :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
  • gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

2.7 内容筛选选择器

基本筛选选择器针对的都是元素DOM节点
如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器

img_a97fe3a7e404388d72e1264c939af560.jpe

  • :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
  • 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
  • :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

2.8 可见性筛选选择器

img_e2b2e9329aafa9be1a8eb26788193f03.jpe

元素可见性依赖于适用的样式

我们有几种方式隐藏一个元素

  • CSS display的值是none。
  • type="hidden"的表单元素。
  • 宽度和高度都显式设置为0。
  • 一个祖先元素是隐藏的，该元素是不会在页面上显示
  • CSS visibility的值是hidden
  • CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

2.9 属性筛选选择器

基于属性来定位一个元素
可只指定该元素的某个属性，这样只需使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素

img_c465f69965e918e64ff49d87be2fc94b.jpe

浏览器支持

  • [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
  • [name!="value"] 属于jQuery 扩展的选择器

CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

  • [attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等
  • [attr*="value"]能在网站中帮助我们匹配不同类型的文件

2.10 元素筛选选择器

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点


img_31b8cb8d9bdbe10129ffb68f548865b2.png
  • :first只匹配一个单独的元素，但:first-child可匹配多个：为每个父级元素匹配第一个子元素。相当于:nth-child(1)
  • :last 只匹配一个单独的元素，:last-child 选择器可以匹配多个元素：为每个父级元素匹配最后一个子元素
  • 如果子元素只有一个的话，:first-child与:last-child是同一个
  • :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
  • jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
  • nth-child(n) 与:nth-last-child(n)的区别是前者从前往后计算，后者从后往前

2.11 表单元素选择器

jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素

img_b744d12db421c7ce3ddd0565aea3ce0b.png

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值
大部分表单类别筛选器可以使用属性筛选器替换
比如 $(':password') == $('[type=password]')

2.13 表单对象属性筛选选择器

附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选


img_b579fe54c683195f07d0b6d703d43111.png
  • 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected
  • 在某些浏览器中，:checked可能会错误选取到<option>，所以保险起见换用input:checked，确保只会选取<input>

2.14 特殊选择器this

$(this)和this有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

this是动态的，这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)

同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

 this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

总体：

  • this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
  • $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

2.12 综合案例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery标签切换效果</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代码部分begin-->
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.背带裤</a>
                    <a>2.哈伦裤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.小脚裤</a>
                    <a>6.西装裤</a>
                    <a>7.打底裤</a>
                    <a>8.阔脚裤</a>
                    <a>9.短裤</a>
                    <a>10.马甲/背心</a>
                    <a>11.羽绒服</a>
                    <a>12.棉服</a>
                    <a>13.夹克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        >
    </div>
    <div id="menu_con">
        <h3>男装</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a name="setColor">12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a name='setColor'>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a>12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        >
    </div>
</div>

<script type="text/javascript">
    //找到男装下第一类衣服中的第一个p元素，并改变颜色
    //可以通过子类选择器  p:first-child 筛选出第一个p元素
    $("#menu_con .tag p:first").css('color', '#9932CC');
</script>

<script type="text/javascript">
    //找到男装下第一类衣服把a元素从顺序1-4加上颜色
    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
    //注意了index是从0开始计算，所以选在1-4,为对应的index就是4
    $("#menu_con .tag a:lt(4)").css('color', 'red');
</script>

<script type="text/javascript">
    //找到男装所有a元素中属性名name="setColor"的元素，并设置颜色
    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
    $("#menu_con a[name='setColor']").css('color', 'blue');
</script>

<script type="text/javascript">
    //不分男女，选中第一类衣服中第9个a元素，并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $("#menu .tag a:nth-child(10)").css('color', '#66CD00');
</script>

<script type="text/javascript">
    //找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色
    $("#menu_female .tag a:contains('更多')").css('color', '#C71585');
</script>


</body>

</html>
上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/635906

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python3.6中那些很酷的特性

你还记得 3.6 有哪些酷炫的特性吗？来回顾一下。 可读性更强的数字字面值 Python代码在可读性上做到了极致，被称为是可执行伪代码。然而，它还在不断地改进，比如这个可读性更好的数字字面值语法，就是方便程序员能以一种 “for humans ” 的方式阅读和理解数字。你现在可以给数字添加下划线，并按照你喜欢的方式对它们进行分组 。这对于二进制或十六进制数字或者是大数来说非常方便： >>> six_figures = 100_000 >>> six_figures 100000 >>> a = 10_00_0 >>> a 10000 >>> error = 0xbad_c0ffee >>> error 5015974705
2018-07-16
611
上一篇

never give up——bugku

刚刚做了bugku的题目，现在整理一下 写出解题思路，希望能够帮助到那些需要帮助的人 所有的wp都是以一题一篇的形式写出 主要是为了能够让读者更好的阅读以及查找， 希望你们不要责怪！！共勉！！！ Challenge 633 Solves never give up 100 http://120.24.86.145:8006/test/hello.php 作者：御结冰城 解题思路：首先查看源代码就会看到： 看见那个红线的地方就是我们需要的，直接访问就好了： 直接使用使用base64进行解码就会得到： 然后使用url进行解码就会得到： ";if(!$_GET['id']) { header('Location: hello.php?id=1'); exit(); } $id=$_GET['id']; $a=$_GET['a']; $b=$_GET['b']; if(stripos($a,'.')) { echo 'no no no no no no no'; return ; } $data = @file_get_contents($a,'r'); if($data=="bugku...
2018-07-16
658
下一篇

相关文章

发表评论

资源下载

更多资源
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-03-02 大小: 1.42GB 下载: 3次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Rocky Nacos3 SpringBoot4 DeepSeek Service Mesh Jdk25 Redis Gemini3 Docker HarmonyOS6 Kubernetes SpringCloud OpenAi

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册