jQuery篇
1.jQuery是JS的工具库，通过封装原生的JS方法，简化JS操作
功能和优势：
- 简化DOM操作
- 可以直接通过选择器设置元素样式
- 链式调用（核心）
- 事件处理更加高效
- Ajax技术更加完善（网络请求）
- 提供各种插件可供使用
2.使用
1.引入jQuery文件
<script src="jquery-1.11.3.js"></script>
2.使用工厂函数 —— $()
根据选择器获取元素节点
3.原生JS对象与jQuery对象互相转换
1. DOM 转换 jQuery对象
使用$()包装原生DOM对象,返回jQuery对象
eg:
原生对象：var h1 = document.getElementsByTagName('h1')[0]
Jquery对象：var $h1 = $(h1)
2.jQuery 转换 DOM 对象
eg:
var h1 = $('h1')[0];
4.jquery选择器
-
使用选择器获取jQuery对象
-
语法： $(“选择器”)
-
分类：
-
基础选择器
- 标签选择器：$(“div”)
- id选择器：$("#id")
- 类选择器：$(".className")
- 群组选择器：$(“selector1, selector2”)
-
层级选择器
1. 后代选择器 $("selector1 selector2") 匹配后代元素 2. 子选择器 $("selector1 > selector2") 匹配直接子元素 3. 相邻兄弟选择器 $("selector1 + selector2") 匹配紧跟在selector1后的一个兄弟元素,且满足selector2,否则匹配失败 4. 通用兄弟选择器 $("selector1 ~ selector2") 匹配selector1后面所有满足selector2的兄弟元素 -
过滤选择器
1. :first $("p:first") 匹配一组元素中的第一个元素 2. :last $("p:last") 匹配一组元素中的最后一个元素 3. :not() $(":not(selector1,selector2)") 否定筛选,匹配除()中列出的元素外,所有元素 4. :odd $("p:odd") 匹配偶数行对应的元素 5. :even $("p:even") 匹配奇数行对应的元素 6. :eq(index) $("p:eq(2)") 匹配指定下标对应的元素 7. :lt(index) 匹配下标小于index的元素 8. :gt(index) 匹配下标大于index的元素4.属性选择器
1. [attribute] 获取属性名为attribute的元素 $("[id]") 包含id属性的元素 2. [attribute=value] 获取属性名等于attribute,属性值为value的元素 $("[id=d1]") 3. [attribute!=value] 匹配属性值不等于value的元素 4. [attribute^=value] 匹配属性值以value开头的元素 5. [attribute$=value] 匹配属性值以value结尾的元素 6. [attribute*=value] 匹配属性值中包含value的元素5.子元素过滤选择器
1. :first-child 匹配属于其父元素中的第一个子元素 $("p:first-child") 2. :last-child 匹配属于其父元素中的最后一个子元素 3. :nth-child(n) 匹配属于其父元素中的第n个子元素
-
5.jquery样式操作
1. 基本操作(标签内容的操作)
1. html("")
为元素设置标签内容,可以识别标签,等价于原生的innerHTML
2. text("")
为元素设置文本内容,不能识别标签,等价于原生的innerText
3. val()
用来设置或读取文本框或表单控件的值
4. attr()
设置或读取指定的标签属性
eg: $("div").attr("id","d1");
5. removeAttr("")
移除指定的属性,参数为属性名
2.样式操作
1.添加样式
$("div").attr("id","d1") # 添加id
$("div").attr("class","c1") #添加class
2.针对类选择器
$("div").addClass("c1").addClass("c2") 可以多次调用，或连缀调用
$("div").removeClass("c2") 移除指定的类名
$("div").toggleClass("c2") 动态切换选择器的样式，存在则删除,不存在则添加
3.直接加css样式
$("h1").css("color","red").css("background","green"); #连续调用
$("div").css({
"width":"200px",
"height":"200px",
"text-align":"center",
});
** css样式可用json的格式表示，由属性和值组成
6.jquery节点的层次方法
根据层级关系获取节点对象
1. children() / children("selector")
获取当前节点下所有的直接子元素,或者获取当前节点下,满足选择器的所有直接子元素
2. parent()
获取当前节点的父元素
3. parents("selecor")
获取父元素及祖先元素,或者获取指定选择器的祖先元素
4. find("selector")
必须指定选择器参数,获取包含直接和间接的所有后代元素
5. next() / next("selector")
获取下一个兄弟元素 / 指定选择器的兄弟元素
6. prev() / prev("selector")
获取上一个兄弟元素 / 指定选择器的兄弟元素
7. siblings() / siblings("selector")
获取所有的兄弟元素 / 满足选择器的所有兄弟元素
7.节点操作（创建，添加，删除）
1.创建节点：$("标签语法")
var $h1 = $("<h1 id='d1' class='c1'>一级标题</h1>");
# 添加样式
$h1.css({"backgroud-color":"red","font-size":"20px"})
2.添加节点
1.内部添加
$div.append($p) 将$p作为$div的最后一个子元素添加
$div.prepend($p) 将$p作为$div的第一个子元素添加
2.外部添加
$div.after($p) 将$p作为$div后一个兄弟元素添加
$div.before($p) 将$p作为$div前一个兄弟元素添加
3.删除节点
$obj.remove() 删除节点
8.事件处理
1. 等待文档加载完毕 (onload)
原生：window.onload = function (){};
jQuery:
1.$(document).ready(function (){});
2.$().ready(function (){});
3.$(function (){});
区别：1. 原生onload事件函数不能重复调用,重复书写,后面的代码会将前面的onload覆盖掉
2.jQuery中优化了ready方法,可以重复使用,不会产生覆盖问题,所有的代码都会执行
2.绑定事件
原生：div.onclick = function (){};
jQuery：
1.$div.click(function (){});
** 事件函数名省略 on 前缀
2.$div.bind("click",function (){});
** bind()方法底层实现是：
$div.on("click",function (){});
3.事件对象
获取方式及相关属性，同原生的JS。浏览器自动将事件对象以参数形式传递给函数中
$div.click(function (evt){
console.log(evt);
});
事件对象的常用属性：
1.target 获取当前事件的触发元素
2.鼠标事件对象
1. offsetX offsetY 鼠标在元素内部的坐标位置
2. clientX clientY 网页中的坐标位置
3. screenX screenY 屏幕坐标系中的位置
3.键盘事件
1.onkeydown 通过which属性获取当前按键字符对应的ASC码值，不区分大小写，统一返回 大写字母的码值
2.onkeypress 通过which属性获取当前按键字符对应的ASC码值，区分大小写
3.key属性 返回当前键位表示的字符
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
