目录
7、JQuery对象和DOM对象之间的关系，他们之间如何去转换？
1、什么是JQuery？
它是js的一个框架，它是开源的项目。对底层的js进行封装，我们通过js框架就可以快速的完成DOM
对元素的增删改查操作，并提供了动画功能。jquery对外提供api让开发者去开发jquery
插件（就是一个功能模块，用户只要做一些简单的配置就完成复杂的功能）。jquery目前
是比较流行的一个JQuery框架。（宗旨：写得少，做的多）。
2、JQuery特点:
- 轻量级
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 完善的Ajax
- 出色的浏览器兼容性
- 丰富的插件支持
- 完善的文档
- 支持链式操作
3、JQuery的环境配置
1)官网：http://www.jquery.com
2)去下载jquery库文件:
通常有两个版本:
*未压缩版本：--用在开发和调试。（我们下载此版本）
*压缩版本:--产品发布的时候使用，可以提高性能和减少带宽
4、在html页面中如何使用jQuery？
使用引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<style>
a{
text-decoration:none;
}
</style>
</head>5、在<script></script>内编写jquery脚本
/*当文档解析完毕好以后去执行一个函数*/
// 第一种写法
jQuery(document).ready(function(){
alert("hello,jQuery");
});
// 第二种写法
$(document).ready(function(){
alert("hello,jQuery");
})
// 第三种写法
$(function(){
alert("hello,jQuery");
})
注意:jQuery可以使用$符号作为别名。
强调:和window.οnlοad=function(){}区别?
*加载时机不同，$(function(){})优先于window.οnlοad=function(){}先执行
*执行的次数不同，window.οnlοad=function(){}只会执行最后一个绑定的函数。
$(function(){})可以绑定多个函数来分别执行。
6、jQuery的语法结构
jQuery语句主要包含三大部分：$()、document和ready()分别被称为工厂函数、选择器selector和方法action。
语法：$(selector).action();
- 工厂函数$()：美元符号$是jQuery的简写版本，$()等同于jQuery()。$()的作用是将DOM对象转换为jQuery对象。
- 选择器selector：jQuery支持CSS1.0到CSS3.0版本中几乎所有的选择器，如ID选择器丶标签选择器和类选择器等，通过选择器可以选取网页中的元素。
- 方法action：通过选择器选取到元素后，jQuery提供了一系列方法对元素进行“操作”，根据方法的作用可以划分为事件处理方法丶动画方法丶HTML/CSS方法丶遍历方法丶Ajax方法和杂项方法。
7、JQuery对象和DOM对象之间的关系，他们之间如何去转换？
*使用DOM方法来查询得到的结果是DOM对象，它只能访问DOM对象中所提供的属性和方法。
*使用JQuery查询得到的结果是Jquery对象，它只能访问jQuery对象中所提供的属性和方法。
也就是说JQuery对象不能调用DOM对象的属性和方法，反之也一样。
注意:养成一个良好的书写习惯,JQuery对象的变量名最好以$开头。
记住:JQuery查询出来的结果是一个对象数组，就算根据id来进行查询就是返回的是一个对象数组。
数组内存放的是DOM对象。
*JQuery对象转换成DOM对象，通过[下标]就可以转，或者get(下标)方法来取出数据就是DOM对象
*DOM对象转换成JQuery对象，通过$()工厂函数就可以了，把DOM对象作为参数传给$()函数，那么
就把DOM对象转换成了JQuery对象。
8、JQuery选择器
7.1 基础选择器
| 类型 | 语法 | 描述 | 返回值 | 示例 |
| id选择器 | #id | 根据指定的id匹配元素 | 单个元素 | $("#content")选取id为content 的元素 |
| 类选择器 | .class | 根据指定的class名匹配元素 | 元素集合 | $(".content")选取class名称为 content的元素 |
| 标签选择器 | element | 根据指定的标签名匹配元素 | 元素集合 | $("p")选取所有的p标签元素 |
| 全局选择器 | * | 匹配所有元素 | 元素集合 | $("*")选取所有元素 |
| 并集选择器 | selector1, selector1, .... selectorN | 将每个选择器匹配到的元素合 并后一起返回 | 元素集合 | $("div,p,#content")选取所有 div丶p和id为content的元素 |
7.2 层次选择器
| 类型 | 语法 | 描述 | 返回值 | 示例 |
| 子选择器 | parent>child | 选取parent元素下所有的 child子元素 | 元素集合 | $("ul>li");选取ul元素下所有的li 元素 |
| 后代选择器 | root siblings | 匹配root元素里所有的 siblings后代元素 | 元素集合 | $("div p");选取div元素里所有的p 元素 |
| 兄弟元素选择器 | prev~siblings | 匹配prev元素之后的所有兄 弟元素 | 元素集合 | $("p~span");选取所有p元素之后 的所有兄弟span元素 |
| 相邻元素选择器 | prev+next | 匹配紧邻prev元素后的next 元素 | 元素集合 | $("h1+ul");选取紧邻h1元素之后的 兄弟元素ul |
7.3 过滤选择器
7.3.1 基础过滤选择器
| 语法 | 描述 | 返回值 | 示例 |
| ：first | 选取第一个元素 | 单个元素 | $("ul:first")选取所有ul元素中的第一个ul元素 |
| ：last | 选取最后一个元素 | 单个元素 | $("ul:last")选取所有ul元素中的最后一个ul元素 |
| ：not(selector) | 选取除给定选择器外的所有元素 | 元素集合 | $("ul:not(.top)")选取class不是top的ul元素 |
| ：even | 选取索引值为偶数的元素，索引从0 开始 | 元素集合 | $("ul:even")选取索引是偶数的ul元素 |
| ：odd | 选取索引值为奇数的元素，索引从0 开始 | 元素集合 | $("ul:odd")选取索引是奇数的ul元素 |
| ：eq(index) | 选取给定索引的元素，索引从0开始 | 单个元素 | $("ul:eq(0)")选取索引为0的ul元素 |
| ：gt(index) | 选取所有大于给定索引的元素，索引 从0开始 | 元素集合 | $("ul:gt(1)")选取索引大于1的ul元素 |
| ：lt(index) | 选取所有小于给定索引的元素，索引 从0开始 | 元素集合 | $("ul:lt(1)")选取索引小于1的ul元素 |
| ：header | 选取所有标题元素，如h1~h6 | 元素集合 | $(":header")选取网页中所有的标题元素 |
| ：focus | 选取当前获取焦点的元素 | 元素集合 | $(":focus")选取当前获取焦点的元素 |
| ：animated | 选取所有动画元素 | 元素集合 | $(":animated")选取当前所有动画元素 |
7.3.2 属性过滤选择器
| 语法 | 描述 | 返回值 | 示例 |
| [attribute] | 选取包含指定属性的元素 | 元素集合 | $("p[id]")选取含有id属性的p元素 |
| [attribute=value] | 选取包含指定属性为value的元素 | 元素集合 | $("p[id=content]")选取id为content的p元素 |
| [attribute!=value] | 选取包含指定属性不等于value的元素 | 元素集合 | $("p[id!=content]")选取id不等于content的p元素 |
| [attribute^=value] | 选取包含指定属性以value开始的元素 | 元素集合 | $("p[id^=content]")选取id以content开始的p元素 |
| [attribute$=value] | 选取包含指定属性以value结束的元素 | 元素集合 | $("p[id$=content]")选取id以content结束的p元素 |
| [attribute*=value] | 选取包含指定属性包含value的元素 | 元素集合 | $("p[id*=content]")选取id包含content的p元素 |
7.3.3 表单选择器
:input:选取所有
:text:选取所有单行文本框
:password:选取所有密码框
:radio:选取所有单选按钮
:checkbox:选取所有复选框
:submit:选取所有提交按钮
:image:选取所有图像按钮
:reset:选取所有重置按钮
:button:选取所有按钮
:file:选取所有上传域
本章总结
- jQuery是一个快速丶小型且功能丰富的JavaScript库。
- 使用jQuery进行开发，可以导入jQuery文件或引入jQuery在线CDN地址。
- 美元符号“$”是jQuery的简写版本，$()等同于jQuery()。
- 为了获取DOM元素，jQuery提供了丰富的选择器。
- 基础选择器包括：id选择器丶类选择器丶标签选择器丶全局选择器丶并集选择器。
- 层次选择器包括：子选择器丶后代选择器丶兄弟元素选择器丶相邻元素选择器。
- 过滤选择器包括：基本过滤选择器丶内容过滤选择器丶可见性过滤选择器丶属性过滤选择器丶子元素过滤选择器和表单对象属性过滤选择器。
- jQuery.noConflict()函数将美元符号"$"的控制权移交给其他JavaScript库。
练习小作业
- 编写第一个jQuery程序
- 改造手机列表页面
- 改造导航下拉菜单
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
