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

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联系笔者删除。
笔者：苦海

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

jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
jQuery对象和DOM对象使用说明
1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传 ...
jquery对象PHP转换,jQuery对象与DOM对象转换方法详解_jquery
本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属 ...
详解jQuery对象与DOM对象的相互转换
一直以来对于通过jQuery方式获取的对象,却不能直接使用JavaScript的方法很不理解,现在知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象一样.所以一些 ...
jquery对象和Dom对象的不同
起因是因为我在写一个for循环的时候,trtext获取不到. var ttr=$("#tabFiles tr"); for(var i=0;i<ttr.lenght;i++) ...
JQuery对象与DOM对象
先把对象放一边,我们先来试着实现一个最简单的小程序,在div中写入:"您好!好好学习jQuery才是最正确选择"这段文字.想像一下,如果是你你会怎么写? <html> ...
JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
了解jQuery并掌握jQuery对象和DOM对象的区别
jQuery的优势: 开源--开放源代码轻量级强大的选择器出色的DOM操作(对DOM元素的一个增删改查) 完善的Ajax,出色的浏览器兼容性,丰富的插件支持,完善的文档(说明书) 链式操作方式, ...

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

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

最新文章

热门文章