jQuery的基本使用
这篇来说如何来使用jQuery？
Ⅰ、jQuery的引入
①一般引入：使用jQuery只要要在页面的<head>中引入jQuery文件就可；
引入jquery文件
引入这个文件的话，我们得提前把它下载好，放在js文件夹中。下载的话在百度搜索jQuery就可。
②其余引入，是通过少量npm、node、yarn也可以引入jQuery。
Ⅱ、$符号
jQuery把所有的功能一律封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。
$ 与 jQuery 类型相等
$与jQuery都是方法类型。大多数情况，我们都直接使用$，假如$变量被占用并且还不能修改，就只能使用jQuery这个变量。
Ⅲ、jQuery的书写格式
jQuery中比较简单易懂，你用什么就选什么，比方说，我们增加div标签的class值，如下图所示：
增加class值
增加成功
我最开始学习jQuery的时候是用它的原始格式，选择对象后准备就绪之后，也就是说页面加载完成后，就会执行函数里面的内容了。
即：$(document).ready(function(){
? ? ? ? ? ? ?$(‘div’).addClass(‘box’);
? ? ? ? ?});
那么，感觉这样好麻烦的话，它也有缩写形式，如下代码所示：
第一种缩写格式：
$().ready(function(){
? ? ? ? ? ? ?$(‘div’).addClass(‘box’);
? });
第二种缩写格式：
$(function(){
? ? ? ? ? ?$(‘div’).addClass(‘box’);
? ?});
以上两种缩写格式都相似于原生格式：window.onload = function(){};
推荐大家用第一种原始格式。
Ⅳ、选择器
①选择器是jQuery的核心
? ? 一个选择器可以写出相似$(‘#dom-id’)
? ? 在js中，得写 var obj=document.getElementById(‘dom-id’);
? ? 在jQuery中，var obj=$(‘#dom-id’);
②jQuery选择器返回的对象是jQuery对象
? ? 相似于数组，每个元素都是一个引用了DOM节点的对象
? ? 假如选择的jQuery对象不存在肯定不会返回undefined或者者null
? ? 所以不必判断if(div === undefined)
③选择器又分为多种，如基本选择器、多项选择器、层级选择器、属性选择器、过滤器、表单相关、内置查找和过滤。
⑴ 基本选择器
? #id? ? ? ? ? ? ? 根据指定的id匹配一个元素
? element? ? ? 根据指定元素的标签名匹配所有元素
? .class? ? ? ? ? 根据指定的类名匹配元素
? 通配符*? ? ? ?匹配所有的元素
⑵ 多项选择器? ?$(‘selector1,selector2,selectorN’);
? 将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
⑶ 层级选择器
a. 后代选择器? ?$(‘ancestor descendant’);
在指定的祖先元素下匹配所有的后代元素；
2个弊端：会选中所有的后代，除了儿子，就连孙子，重孙只需你有都会选中
b. 直接后代选择器 $(‘parent > child’);? ? 在指定的父元素下匹配所有的子元素
c. $(‘prev + next’);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 匹配所有紧接在prev元素后的next元素
d. 兄弟选择器? ? $(‘prev ~ siblings’);? ? 匹配prev元素之后的所有siblings元素
⑷ 属性选择器
有以下七种属性选择器：
[attribute]? ? ? ? ? 属性名选择器、
[attribute=value]? ? 属性值选择器
[attribute!=value]? ? 非属性值选择器
[attribute^=value]? ? 以某个属性值开头的选择器
[attribute$=value]? ? 以某个属性值结尾的选择器
[attribute*=value]? ? 包含属性值选择器
[selector1][selector2][selectorN]? 多个属性选择器
⑸ 过滤器，一般不会单独使用
????:first-child
????:last-child
????:nth-child(n | even | odd | formula)
????:nth-last-child(n | even | odd | formula)
????:only-child
????:first-of-type
????:last-of-type
????:nth-of-type(n | even | odd | formula)
????:nth-last-of-type(n | even | odd | formula)
????:only-of-type
过滤器参数：
? ? n? ? ? ? 匹配子元素序号，必需为整数，从1开始
? ? even? ? 匹配所有的偶数元素
? ? odd? ? ? 匹配所有的奇数元素
? ? formula? 使用特殊公式如(an+b)进行选择
⑹ 表单相关
a. 表单元素
:input? ? ? ? ? ?可以选择<input>,<textarea>,<select>,<button>
:text? ? ? ? ? ? ?匹配所有的单行文本框，和input[type=’text’]一样
其余input的type ：
:password / :radio / :checkbox / :image / :reset / :button / :file
b. 表单状态
:enabled? 匹配所有可用元素
:disabled? 匹配所有不可用元素
:checked? 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
:selected? 匹配所有选中的option元素
单选框、复选框尽量用checked ，下拉框用selected
⑺ 内置查找和过滤? ?ps：[]中括号括起来的代表可选参数
a.? ?find(expr|object|element)? 搜索所有与指定表达式匹配的元素(find找到的不论是孩子还是孙子全都能找)
b.? ?children([expr]) 获得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合 (注意用children找到的是某个元素的孩子，性能比find好少量)
c.? ?parent([expr]) 获得一个包含着所有匹配元素的唯一父元素的元素集合
d.? ?next([expr]) 、prev([expr])? 获得一个包含匹配的元素集合中每一个元素紧邻的后面(前面)同辈元素的元素集合
e.? ?eq(index | -index)? 获取当前链式操作中第N个jQuery对象
? ? ? 参数的值假如是正数，就是正数第几个，假如是负数，就是倒数第几个。
f.? ?siblings([expr])? 获得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
g.? filter()与参数分析? (filter过滤器)
? ? ? filter(expr|object|element|fn) 挑选出与指定表达式匹配的元素集合（filter可以代替以上的方法）
参数分析：
? ? expr? ? ? ? ?代表字符串值,包含供匹配当前元素集合的选择器表达式
? ? object? ? ? 现有的jQuery对象,以匹配当前的元素
? ? element? 一个用于匹配元素的DOM元素
? ? fn? ? ? ? ? ? 一个函数用来作为测试元素的集合
今日份知识点%已送达，小可爱们请查收~~
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jQuery的基本使用
