jQuery的增删改查与事件

jQuery作为一个方便简洁的Javascript框架，大大简化了Js的编程操作，使用jQuery需要首先下载jQuery的js文件，然后在我们的项目中引入该文件。

1、jQuery的查找操作

对于基本选择器和层级选择器来讲，jQuery与css样式的选择基本类似，选择类则使用$(".class")，选择id则使用$("#id")的形式，在后代选择以及子代选择上也均与css一致。
对于兄弟关系的操作，主要包含以下这些方法：
(1)$("...").next/prev()，表示的是紧邻的前一个或者后一个元素
(2)$("...").nextAll/prevAll()，表示的是之前或者之后的所有元素
(3)$("...").siblings()，表示的是除自己之外的所有兄弟

2、jQuery的修改操作

2.1 访问元素属性

① 获取属性使用$("...").attr("属性名")
② 修改 属性使用$("...").attr("属性名",值)
例如：

//获取a节点的href属性值
$("a").attr("href")
//设置a节点的href属性值
$("a").attr("href","https://www.baidu.com")

2.2 访问内容

2.2.1 html操作

html( )读取或修改节点的HTML内容
例如：

//获取<p>元素的HTML代码
$("p").html()
//设置<p>元素的HTML代码
$("p").html("<strong>这是一个内容</strong>");

2.2.2 文本操作

text( )读取或修改节点的文本内容
例如：

//获取<p>元素的文本
$("p").text()
//设置<p>元素的文本
$("p").text("这是一个段落");

2.2.3 值操作

val( )读取或修改节点的value属性值
例如：

//获取按钮的value值
$("input:eq(0)").val();
//设置按钮的value值
$("input").val("请你输入一个值");

2.3 样式

2.3.1 直接修改css属性

获取css样式(计算后的样式) :$("...").css("CSS属性名")
修改css样式 :$("...").css("css属性名"，值)

2.3.2 通过修改class批量修改样式

① 判断是否包含指定class :$("...").hasClass("类名")
② 添加class :$("...").addClass("类名")
③ 移除class :$("...").removeClass("类名")

3、JQuery的添加操作

3.1 创建新元素

$(parent).append($newelem)

3.2 将新元素结尾添加到DOM树

var $li = $("<li title='金鱼'>金鱼</li>");
var $parent = $("ul");
$parent.append($li);

4、JQuery的删除操作

使用$("...").remove()
例如：

// 获取第二个<li>元素节点后，将它从网页中删除
$("ul li:eq(1)").remove();
//把<li>元素中属性title不等于"橙子"的<li>元素删除
$("ul li").remove("li[title!=橙子]");

5、JQuery的事件

5.1 事件绑定

语法：$("...").bind("事件类型"，function(e){....})
如： $("...").bind("click"，function(e){....})
简写形式:$("...").click(function(e){....})

$("#btn").click(function(e){
console.log("Hello World!");
})

5.2 事件对象(event)

$("#btn").click(function(e){
console.log("hello");
})

● 这个对象e中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。
● 事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
clientX/offsetX/pageX/screenX/x：事件发生的X坐标
clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
keyCode : 键盘事件中按下的按键的值