jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

苦海123

已于 2024-03-19 23:03:42 修改

阅读量160

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2021-04-28 08:00:10 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116222267

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery简介：

jQuery是一个高效、精简并且功能丰富的javascript库，它提供的API简单易学，且兼容众多浏览器，极大地简化了javascript代码开发，包含内容：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities。

jQuery优点：

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发，有着丰富的第三方的插件。
免费、开源。

jQuery 的使用步骤：

1.下载jQuery：

下载jQuery可以到官网地址： https://jquery.com/，选择自己需要的版本，不同版本之间的大概区别如下：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

2.将jQuery文件引入项目：

下载下来的压缩包里面有两种格式jQuery文件，选择以min.js结尾的压缩文件（不压缩也可以，生产环境一般选择压缩文件）并通过script标签推荐引入到head标签中：

	<head>
    	<script type="text/javascript" src="jquery.min.js"></script><!-- type="text/javascript"可以省略,当然jQuery文件可以使用cdn等网络资源 -->
    </head>

3.在新的script标签中书写jQuery代码：

因为jQuery实际就是封装的javascript代码，因此jQuery代码和javascript代码可以相互书写，但是它们之间有自己的API，不能混淆，如：

	<script>
        // 书写jQuery代码和javascript代码：
        $('p').text('这是一段文本');
    		function myf(){};
    </script>

jQuery语法：

入口函数(文档就绪函数)：

因为jQuery在页面未加载完成时，是不能操作DOM元素的，为了避免出现这个问题，jQuery封装了像javascript中onload事件一样的方法，如：

	<script>
        // 第一种: $(function(){书写jquery代码：})，这种比较简洁，推荐使用：
        $(function() {
            $('div').text('hello word');
        });
    
        // 第二种:通过$(document).ready()方法实现加载延时，同样在ready()方法的括号中使用function(){书写jQuery代码：}
        $(document).ready(function() {
            $('div').text('hello word');
        });
    </script>

注意：

1.在jQuery中$就是jQuery的顶级对象，在jQuery中任何$都可以使用jQuery代替（jQuery中的Q是大写），在jQuery中使用jQuery关键字可以解决其他语言中$命名冲突问题；

2.上面的两种方式都是指DOM元素的加载，相当于原生javascript中的DOMContentLoaded方法，并非指的图片等其他引用资源。

jQuery 对象和 DOM 对象实质比较：

jQuery的方法和javascript的方法是不同的，因此不能混淆使用，如DOM元素中的innerHTML和jQuery的html()是不能混淆使用；

jQuery对象和javascript对象也是不同的，它们之间的实质是：jQuery对象是通过$符号将DOM对象包装后产生的，jQuery对象是一个伪数组。

jQuery 对象和 DOM 对象的相互转换：

因为jQuery对象是通过$包装后生成的，因此：DOM对象转jQuery对象仅需通过$符号或jQuery包裹，如：

	<script>
        var divs = document.querySelector('div');
        divs.innerText = 'hello';
        // 通过$将divs这个DOM对象转换为jQuery对象：
        $(divs).css('color', 'red');
    </script>

因为jQuery对象实际是以DOM对象为元素的伪数组，因此可以通过索引的方式拿到某个DOM元素，一般索引为0的元素为DOM元素本身，因此一般都是通过[0]的方式将jQuery对象转换为DOM对象，但是jQuery中提供了get(0)方法转换为DOM元素，如：

	<script>
        var $box = $('div');
        $box.html('hello word');
        // 通过[0]将jQuery对象转换为DOM对象：
        $box[0].style.color = 'skyblue';
    		// 通过get()转换为DOM对象：
    		$box.get(0).style.fontSize='20px';
    </script>

jQuery 选择器:

原生javascript中的选择器存在兼容性问题，而且使用比较单一，jQuery给我们封装了丰富而且没有兼容问题的选择器，其语法：$(‘CSS选择器’)，具体如下：

基础选择器：

	<script>
        // 1标签选择器：
        $('div').text('hello');
    
        // 2.class类选择器：
        $('.p').html('<a href = "https://www.baidu.com">百度</a>');
    
        // 3.id选择器：
        $('#a').css('color', 'green');
    
        // 4.通配符选择器：
        $('*').css('fontSize', '30px');
    
        // 5.并集选择器：
        $('.p,a,span').css('fontSize', '12px');
    
        // 6.交集选择器：
        $('a.as').css('textDecoration', 'none');
    </script>

层级选择器：

层级选择器指父级选择器、父代选择器、子级选择器、后代选择器等。

	<script>
        // 1.后代选择器：选中类名为box的div里面所有的p标签
        $('.box p').css('color', 'blue');
    
        // 2.子代选择器：选中类名为box的div的亲子p标签
        $('.box > p').css('color', 'red');
    </script>

属性选择器：

属性选择器指通过[‘属性’]表达式进行选择：

	<script>
        // 1.选中具有class属性的标签：
        $('[class]').css('color', 'red');
    
        // 2.选中具有class属性，且class值为li的标签：
        $('[class="li"]').css('fontSize', '30px');
    
        // 3.选中具有href属性，但href值不为#的标签：
        $("[href!='#']").css('textDecoration', 'none');
    
        // 4.选中具有href属性，且href值以.com结尾的标签：
        $("[href$='.com']").css('display', 'none')
    </script>

筛选选择器

筛选选择器指的是通过特殊的字符进行筛选：

	<script>
        // 1.选中一组li中的第一个li：
        $('li:first').css('color', 'yellow');
    
        // 2.选中一组li中的最后一个li:
        $('li:last').css('color', 'red');
    
        // 3.选中索引为3的li:
        $('li:eq(3)').css('color', 'pink');
        $('li').eq(3).css('fontSize', '28px');
    
        // 4.选中索引为奇数的li:
        $('li:odd').css('backgroundColor', 'skyblue');
    
        // 5.选中索引为偶数的li:
        $('li:even').css('backgroundColor', 'gray');
    </script>

节点选择器：

节点选择器指类似于DOM中节点的操作，具体如下：

	<script>
        // 1.选中类名为li2的li的父级元素：特别提醒：当某个元素有多层父代元素时parent()括号中可以传入特指的某个父代元素的选择器
        $('li.li2').parent().css('listStyle', 'none');
    
        // 2.选中类名为ul2的ul中的亲子级li:
        $('.ul2').children().css('listStyle', 'decimal');
    
        // 3.找到div里面所有的span（后代选择器）: 
        $('div').find('span').css('color', 'orange');
    
        // 4.找到类名为ul2的ul的所有兄弟元素：特别提醒：siblings()括号中可以传入要查找的具体元素的选择器
        $('ul.ul2').siblings('span').css('fontSize', '30px');
    
        // 5.查找id为lia元素的后面所有兄弟元素：
        $('#lia').nextAll().css('color', 'blue');
    
        // 6.查找类名为li2元素的前面所有兄弟元素：
        $('.li2').prevAll().css('color', 'skyblue');
    </script>

相同元素多次获取性能损耗问题：

在jQuery中同样的，如果在一个作用域中多次使用$(元素),此时会造成性能损耗，建议和原生javascript中一样将获取的元素通过变量本地化，如：

	$('div').show();
	$('div').hide();
	//可以将$('div')用一个变量接收，使用时直接用变量即可，因此上面的代码可优化为：
	$div = $('div');
	$div.show();
	$div.hide();

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery简介：jQuery是一个高效、精简并且功能丰富的javascript库，它提供的API简单易学，且兼容众多浏览器，极大地简化了javascript代码开发，包含内容：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities。jQuery优点：轻量级。核心文件才几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持
复制链接

扫一扫