1.jQuery简单来说就是封装好的JavaScript方法,是JavaScript的插件。
2.jQuery基本选择器: #id element .class * selector1,selector2,selectorN。
3.jQuery层级选择器: ancestor descendant parent>child prev + next prev~siblings。
4.基本筛选器: 在很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为了更快地找到所需的元素可以使用筛选选择器,来找到我们所需的DOM元素,但是筛选选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器,用法与CSS中的伪元素相似,选择器用冒号":"开头,基本筛选器的描述见jQuery API文档。
5. 选择器
$(":first") 获取匹配第一个元素 例如:$('li:first');
$(":last") 获取匹配的最后个元素 例如:$('li:last');
$(":not(selector)") 去除所有与给定选择器匹配的元素 例如:$("input:not(:checked)")
$(":even") 匹配所有索引值为偶数的元素,从 0 开始计数 例如:$("li:even")
$(":odd") 匹配所有索引值为奇数的元素,从 0 开始计数 例如:$("li:odd")
$(":eq(index)") 匹配一个给定索引值的元素,从 0 开始计数 例如:$("li:eq(1)")
$(":gt(index)") 匹配所有大于给定索引值的元素,从 0 开始计数 例如:$("li:gt(0)")
$(":lt(index)") 匹配所有小于给定索引值的元素,从 0 开始计数 例如:$("li:gt(2)")
$(":header") 匹配如 h1, h2, h3之类的标题元素 例如:$(":header").css("background", "#EEE");
$(":animated") 匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)
例如:$(":header").css("background", "#EEE");
$(":focus") 匹配当前获取焦点的元素。
$(":root") 选择该文档的根元素。在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。
6. 通过jQuery的方法获取到的元素 叫做jQuery对象,只能使用jQuery里面的方法和属性,但是js对象要使用jQuery里面的方法 就需要将js对象转换为jQuery对象。
7.after()在每个匹配的元素之后插入内容
8 p.innerText//获取文本
p.innerHTML//获取内部内容
() 不传参数进去就是获取,传了就是设置。
text();方法只会获取和设置文本val();
如果不传入任何的参数那就是去获取值,传入一个参数就是设置一个值。
9. empty() 清空子节点
eg: $("#list").empty();
remove() 移出整个节点
remove() 移出整个节点
eg$("#list").remove();
10. 单击事件 click() 双击事件dblclick()
注意:单击事件只能获取一次,而双击事件可以获取多次。
11 . onmousedown 鼠标按下事件 onmouseup鼠标弹起事件 onmouseenter鼠标进入事件 onmouseleave鼠标离开事件
12. document.createElement("标签名称") 创建元素节点。
13.添加元素:
$(A).appendTo(B) 将新创建A的节点追加到B(已经存在的父节点)中。
14.向每个匹配的元素内部追加内容:
$(B).append(A) 将新创建A的节点追加到B(已经存在的父节点)中
15.:not(selector): 用于筛选的选择器,去除所有与给定选择器匹配的元素。
16.:eq 匹配一个给定索引值的元素,从0开始计数。
17.:gt 匹配所有大于给定索引值的元素,从0开始计数。
18.:lt(index) 匹配所有小于给定索引值的元素。
19.:animated: 匹配所有正在执行动画效果的元素,只有对不在执行动画效果的元素执行一个动画特效。
20:lang(language): 选择指定语言的所有元素 :lang选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">(和他们的后代<div>),但不包括<div lang="fr">
对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决9
21.运用jQuery代码写 颜色转换的小案例1:
- 上面的图片是代码的页面效果图,点击相应的颜色按钮,相应的颜色也会随之变化。
- 在css中书写样式。
- 通过$绑定类名获取div ,在点击事件中书写jq代码。
- 用getComputedStyle方法可以获取到backgroundColor这个属性,this在这里表示的是变量本身。
- 因为是覆盖整个页面的颜色变化,所以可以通过绑定body来实现这个页面效果。
22.运用jQuery代码写设置元素样式的小案例2:
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
(7)使用 margin 属性来水平对齐:
可通过将左和右外边距设置为 "auto",来对齐块元素。
把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素。
注释:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
(8)float:默认值为none ,属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
- 下面的图片是代码的页面效果图,可以通过更改宽度,高度,背景,边框,圆角来设置图片的样式。
- 页面主要分为两大部分,分别是左右两个盒子,一个盒子用来设置样式,一个盒子用来放置图片。
- 下图是在css中设置左右两个盒子的样式,宽度和颜色。
- Input:文本框,匹配所有input,textarea,select和button元素,在jQuery中可以用来查找所有的input元素,都会被匹配到。
- label标签为input元素定义标注,label 元素不会向用户呈现任何特殊效果。
- 不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
(9)给input,button和box都加上id属性。
(10)先在<script></script>中引入jQuery插件。
(11)用$符号绑定id,在点击事件中,先声明一个变量,绑定点击事件去获取值,再去设置点击时获取得到的样式和效果。
(12)val()可以用来获取文本框里面的值,而在javaScript中则写作value。