JQuery的基础语法
基本语法形式：
$（selector）.action（）
$ 定义jQuery对象
selector获取HTML元素
action执行对元素的操作
基本选择器
| 语法 | 描述 |
|---|---|
| $(this) | 当前HTML元素 |
| $("p") | 所有p元素 |
| $(".intro") | 所有class=“intro”元素 |
| $("#intro") | id=“intro”元素 |
| $("ul li:first") | 每个ul的第一个li |
| $("[href]") | 选取带有href属性的元素 |
| $("[href='#']") | 选取带有href值等于的元素 |
| $("href!='#'") | 选取带有href值不等于的元素 |
| $("href$='.jpg'") | 选取带有href值以.jpg结尾的元素 |
| $("p").css("background-color","red"); | css选择器 |
jQuery 事件
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
JQuery查找
1、基本选择器
#id
.class
同CSS
2、层级选择器
后代选择器子代选择器同CSS
3、兄弟关系
$（"...").next/prev()
紧邻的前一个或者后一个元素
$("...").nextAll/prevAll0
之前或者之后的所有元素
$("...").siblings()
除自己之外的所有兄弟
JQuery修改
HTML
(1)获取
$("...").attr("属性名")
(2)修改
$("...").attr("属性名",值)
(3)html( "..."):读取或修改节点的HTML内容
(4)text("..." ):读取或修改节点的文本内容
(5)val( ):读取或修改节点的value属性值
CSS
(1)直接修改css属性
获取css样式(计算后的样式)
$("...").css("CSS属性名")
修改css样式
$("...").css("css属性名"，值)
(2)通过修改class批量修改样式
①判断是否包含指定class
$("...").hasClass("类名")
②添加class
$("...").addClass("类名")
③移除class
$("...").removeClass("类名")
JQuery添加&删除
1、创建新元素
var $new = $("html代码片段")
2、将新元素结尾添加到DOM树
$(parent).append($newelem)
2、删除
$("...").remove()
事件绑定
语法：$("...").bind("事件类型" ，function(e){....})
如： $("...").bind("click" ，function(e){....})
简写形式 $("...").click(function(e){....})
事件对象
$("#btn").click(function(e)
{ console.log("hello"); })
这个对象中包含与事件相关的信息，也提供了可以影 响事件在DOM中传递进程的一些方法。