JQuery环境配置+选择器

最新推荐文章于 2022-04-12 17:30:59 发布

木易一

最新推荐文章于 2022-04-12 17:30:59 发布

阅读量328

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90372289

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是JQuery？

jQuery 是一个JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript 开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript 程序员的设计思路和编写程序的方式。简单地来说:

jQuery 是一个优秀的 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

JQuery的优点

（1）轻量级。jQuery非常轻巧，经过最好的压缩工具UglifyJS（代码混淆）压缩之后,大小保持在30KB左右。

（2）强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

（3）出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。

（4）可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。

（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

（6）不污染顶级变量。jQuery 只建立一个名为jQuery 的对象，所有的函数方法都在这个对象之下。

（7）出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异。

（8）链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。

（9）隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。

（10）行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素，然后直接给元素添加事件。这种将行为层和结构层完全分离的思想，可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时，后期维护也非常方便。

（11）丰富的插件支持。jQuery 的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持，而且还不断地有新的插件面世。

jQuery环境配置

jQuery不需要安装，只需将下载好的jQuery.js文件导入项目文件，想要在某个页面使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。

通常使用1.7或者1.9版本

要使用JQuery，需要先引用JQuery库，如下：

<head>

</head>

在文件中引用JQuery.js后就可以使用了

JQuery里面的顶级变量

首先需要知道的是JQuery中的顶级变量$ ，输出到控制台，可以看到$是一个函数，

因此，$使用时可以 $(XXX) ,也可以 $.XXX

$(document).ready()函数

在编写一个jQuery代码时，必须以$(document).ready()开头，所有的jQuery代码都必须写在$(document).ready(){}里，格式如下: $(document).ready(function(){

//jQuery代码块

});

$(document).ready()括号中的所有代码都会提前执行，而不是在页面所有内容加载完毕之后才执行事件。它允许用户在第一眼看到元素时，就能立即看到元素产生的效果。

为了书写简单，可使用$(function(){......})来代替$(document).ready()函数，作为它的缩写形式，缩写方式如下:

$(function(){

//jQuery代码块

});

JQuery代码示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn"></button>
<script>
    $(document).ready(function (){
        $("#btn").html("按钮").css({
            backgroundColor:"red"
        }).click(function (){
            alert("1");
        });
    });
</script>
</body>
</html>

上面代码是非常简单的一个代码示例，操作button，修改button的HTML内容，添加背景色，添加点击事件等，可以看到其完善的事件处理机制，链式操作，隐式迭代以及强大的选择器。

在写jquery代码的时候注意元素的初始化问题

js里面的window.onload，在JQuery中是

$(document).ready(function () {

/*代码*/

});

简写方式为

$(function () {

/*代码*/

});

JQuery的选择器

jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器4大类。在过滤选择器中又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6类。

一、基本选择器：基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。

选择器	功能	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名称匹配所有元素	元素集合
. class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

二、层次选择器：层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~siblings	匹配prev元素之后的所有兄弟元素	元素集合

注意：siblings()方法与prev ~siblings的区别在于，前者获取所有的相邻元素，不分前后，后者仅获取标记元素后面所有的相邻元素，不能获取前面部分。

三、过滤选择器：过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头

简单过滤选择器：

选择器	功能	返回值
first()或：first	获取第一个元素	单个元素
last（）或：last	获取最后一个元素	单个元素
：not(selector)	获取除给定选择器外的所有元素	元素集合
：even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
：odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
：eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
：It（index）	获取所有小于给定索引值的元素，索引号从0开始	元素集合
：header	获取所有标题类型的元素，如h1,h2,h3...	元素集合
：animated	获取正在执行动画效果的元素	元素集合

内容过滤选择器：

选择器	功能	返回值
：contains（text）	获取包含给定文本的元素	元素集合
：empty	获取所有不包含子元素或者文本的空元素	元素集合
：has（selector）	获取含有选择器所匹配的元素的元素	元素集合
：parent	获取含有子元素或者文本的元素	元素集合

可见性选择器：

选择器	功能	返回值
：hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
：visible	获取所有的可见元素	元素集合

子元素过滤选择器：

选择器	功能	返回值
：nth-child(eq\|\|even\|\|odd\|\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
：first-child	获取每个父元素下的第一个子元素	元素集合
：last-child	获取每个父元素下的最后一个子元素	元素集合
：only-child	获取每个父元素下的仅有一个子元素	元素集合

表单对象属性过滤选择器：

四、表单选择器

下面代码是相关选择器的使用示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btn1"></button>
<ul>
    <li>水果</li>
    <li>蔬菜
        <ol>
            <li>西红柿</li>
            <li>黄瓜</li>
            <li>青菜</li>
        </ol>
    </li>
    <li class="li3">甜点</li>
    <li>饮料</li>
    <li>海鲜</li>
</ul>
<p></p>
<div>
    <span>小猫吃肉肉</span>
</div>
<input type="button" class="btninput" value="按钮1" style=" display: none;"/>
<input type="button" class="btninput" value="按钮2" />
<input type="checkbox" >
<input type="checkbox" checked>
<input type="radio" checked>男
<input type="radio">女
<input type="text">
<select>
    <option>西安</option>
    <option>渭南</option>
</select>
<script>
    //1.基本选择器
    console.log($("#btn"));//id选择器
    console.log($(".btn1"));//类名称选择器
    console.log($("*"));//选择所有元素
    console.log($("button"));//元素名称选择器
    //2.层次选择器
    console.log($("ul li"));//输出所有的li  包括ol下的li
    console.log($("ul>li"));//输出ul的li  不包括ol下的li
    console.log($(".li3+li"));//输出li3后面相邻的li  如果li3后面没有li  则输出为空  输出的innerHTML"饮料"
    console.log($(".li3~li"));//输出li3后面所有的li
    //3.过滤选择器
    //简单过滤
    console.log($("ul>li:first"));//输出第一个元素
    console.log($("ul>li:last"));//输出最后一个元素
    console.log($("ul>li:even"));//输出索引号为偶数的元素
    console.log($("ul>li:odd"));//输出索引号为奇数的元素
    console.log($("ul>li:gt(1)"));//输出所有索引大于给定元素索引值的元素
    console.log($("ul>li:lt(2)"));//输出所有索引小于给定元素索引值的元素
    console.log($("ul>li:eq(2)"));//输出给定索引值的元素
    console.log($("ul>li:not(.li3)"));//输出除给定选择器外的所有元素
    //内容过滤
    console.log($("li:contains('甜点')"));//输出给定文本的元素
    console.log($("p:empty"));//输出所有不包含子元素或文本的空元素
    console.log($("div:parent"));//输出含有子元素或文本的元素
    console.log($("div:has('span')"));//输出含有选择器所匹配的元素的元素
    //可见性选择
    console.log($(".btninput:visible"));//获取所有可见的元素   按钮2
    console.log($(".btninput:hidden"));//获取所有不可见的元素   按钮1
    //属性选择器
    console.log($("button[id][class]"));
    console.log($("button[id='btn'][class='btn1']"));
    //子元素过滤选择
    console.log($("ul>li:nth-child(2)"));//蔬菜
    console.log($("ul>li:first-child"));//水果
    console.log($("ul>li:last-child"));//海鲜
    console.log($("div>span:only-child"));//获取每个父级元素下的仅有一个子元素   小猫吃肉肉
    //表单元素属性过滤
    console.log($("input[type='checkbox']"));//输出所有类型为checkbox的元素  2
    console.log($("input[type='checkbox']:checked"));//1
    console.log($("input[type='radio']"));//输出所有类型为radio的元素  2
    console.log($("input[type='radio']:checked"));//1
    //4.表单选择器
    console.log($("input:checkbox"));//输出所有类型为checkbox的元素    2
    console.log($("input:radio"));//输出所有类型为radio的元素  2
    console.log($(":input"));//获取所有input  select  textarea
    console.log($("input:text"));//获取所有单行文本框
</script>
</body>
</html>

木易一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery环境配置+选择器

什么是JQuery？jQuery 是一个JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript 开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript 程序员的设计思路和编写程序的方式。简单地来说:jQuer...
复制链接

扫一扫

专栏目录