CSDN话题挑战赛第2期
参赛话题:学习笔记
1.什么是jQuery
jQuery:Javascript +Query ,使用JavaScript编写的 js 库,提高开发效率
2.jQuery的特点
- 轻量级框架:write less ,do more
- 应用广泛
- 免费开源,文档丰富
- 可以辅助编写众多的第三方库
3.入门程序
1.步骤:
1.引入jquery.js
2.使用
2.举个例子:
4.jQuery语法
4.1 语法
$("选择器").action()
4.2 说明
- $ :核心函数
- 选择器 :jQuery 查找网页元素的表达式,返回的是jquery 对象
- action :jquery 内置函数, 实现特定功能
4.3 核心函数的功能
- 获取dom对象
- 创建dom对象
- 克隆dom对象
5.什么是jQuery对象
使用jquery封装的dom 对象叫做 jQuery对象
6.DOM 对象和 Jquery 对象的相互转换
6.1 DOM对象转换为Jquery对象
6.1.1 语法
var $jquery 变量 =$(dom 对象);
6.1.2 案例
6.2 Jquery对象转为 Dom对象
6.2.1 语法
1.jquery 对象[ index]
2. jquery 对象.get(index)
6.2.2 案例
7.jquey选择器
7.1 什么是jquery选择器
用于获取jQuery对象的表达式
7.2 基本语法
$("选择器表达式")
7.3 基本选择器
基本选择器是Jquery中最常用的选择器,通过元素的id,引用的样式类名、标签名、通配符 来查找DOM 元素。
- id 选择器: $("#id")
- 元素选择器: $("元素名")
- 类选择器: $(".类名")
- 通配符选择器: $("*")
7.3.1 id选择器
$ (" #id")
效果如下:
7.3.2 元素选择器
$("元素名")
效果如下:
7.3.3 类选择器
$(".类名")
效果如下:
7.3.4 通配符选择器
$(" *") 匹配所有元素
效果如下:
7.3.5 组合(合并选择器)
$(“选择器 1,选择器 2,选择器 3,...”)
将每一个选择器匹配到的元素合并后一起返回。
我们可以指定任意多个选择器,并将匹配到的元素合并到一个结果
效果如下:
8.属性选择器
8.1 定义
通过元素的属性获取相应的元素
8.2 类型
- [attribute]:匹配包含指定属性的元素
- [attribute=value]:匹配给定的属性是某个特定值的元素
- [attribute=!value]:匹配所有不包含指定的属性,或者属性不等于特定值的元素
- [attribute^=value]:匹配给定的属性是以某些值开始的元素
- [attribute$=value]:匹配给定的属性是以某些值结尾的元素
- [attribute*=value]:匹配给定的属性是以包含某些值的元素
- [attribute=!value][attribute=!value]:组合使用
9.层次选择器
9.1 定义
通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等
9.2 类型
- parent child:匹配 符合parent 的元素下所有符合child 选择器的元素 (所有子孙)
- parent>child:匹配符合parent的元素下 所有符合child选择器的直接后代元素
- prev+next:匹配符合prev选择器的元素后的下一个匹配next选择器的元素(同级兄弟)
举个例子
1.parent child 所有子孙
效果:
将form 下的所有的child选出来了。
2.parent>child 只选儿子
效果:
3.prev+next
获取div标签的下一个input标签的dom元素
10.内容过滤选择器
10.1 定义
在已经选择的对象中根据它所包含的子元素和文本内容进行过滤。
10.2 类型
- :contains(text):匹配包含给定文本的元素
- 一般用作对元素内文字内容进行过滤
- :empty:匹配所有不包含子元素或者文本的空元素
- :has(selector):在已经筛选的元素中根据selector再进行筛选,只有符合:之前以及has中定义的选择器规则,元素才能被选择。
- :parent:匹配含有子元素或者文本的元素,与empty相对。
11.可见性过滤选择器
11.1 定义
是根据元素的可见和不可见状态来选择相应的元素
11.2 类型
- :hidden:匹配所有的不可见元素
- :visible:匹配所有的可见元素
12.删除DOM元素的方式
12.1 obj.detach('selector')
从jQuery对象(obj)中删除所有匹配选择器(selector)的元素。
12.2 obj.empty()
递归删除obj(jQuery对象)的全部子节点,不删除自己。
12.3 obj.remove()
删除obj(jQuery对象)以及该对象全部子节点、节点绑定的事件、数据。
12.4 obj.unwrap()
删除obj(jQuery对象)的父元素,保留自身以及兄弟节点。
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。
匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
13.包裹
13.1 wrap
13.1.1 语法
- wrap(html|element|fn):把所有匹配的每个元素用其他元素的结构化标记包裹起来。
- wrapAll:将所有匹配的元素用单个元素包裹起来
- wraplnner(html|element|fnl):将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
14.dom元素的克隆
14.1 clone([Even[,deepEven]])
创建一个指定的元素集合完全相同的副本。
完全相同泛指数据相同,副本指内存地址不同。
15.dom元素的替换
使用一个元素替换另外一个元素。