jquery增删改查与jquery事件

目录

• jquery查找
• 1. 基本选择器 #id.class 同css
• 2. 层级选择器 后代选择器 子代选择器 同css
• 3. 兄弟关系

• 1． 访问元素属性
• 2.内容
• 2.1 html操作
• 2.2 文本操作
• 2.3 值操作

• 3.1． 直接修改css属性
• 3.2． 通过修改class批量修改样式

• 1. 事件绑定
• 2. 事件对象

jquery查找

1. 基本选择器 #id.class 同css

2. 层级选择器 后代选择器 子代选择器 同css

3. 兄弟关系

紧邻的前一个或者后一个元素

$(“…”).next/prev()

之前或者之后的所有元素

$(“…”).nextAll/prevAll

除自己之外的所有兄弟

$(“…”).sliblings()

jquery修改

1． 访问元素属性

A． 获取：

$(“…”).attr(“属性名”)

B． 修改：

$(“…”).attr(“属性名”,值)

// 获取北京节点name属性值

$bj.attr(“name”)

// 设置北京节点的name属性值

$bj.attr(“name”,”beijing”);

2.内容

2.1 html操作

Html();读取或者修改节点的html内容
// 获取< p>元素定位html代码

$(“p”).html()

// 设置< p>元素的html代码

$(“p”).html(“<strong>你最喜欢的水果是？</strong>”);

2.2 文本操作

Text();读取或者修改节点的文本内容
//获取< p>元素的文本

$(“p”).text()

//设置< p>元素的文本

$(“p”).text(“你最喜欢的水果是？”);

2.3 值操作

Val();读取或者修改节点的value属性值
//获取按钮的value值

$(“input:eq(5)”).val();

//设置按钮的value值

$(“input”).val(“我被点击了”);

3. 样式

3.1． 直接修改css属性

a． 获取css样式（计算后的样式）

$(“…”).css(“css属性名”)

b． 修改css样式

$(“…”).css(“css属性名”,值)

3.2． 通过修改class批量修改样式

a．判断是否包含指定class

$(“…”).hasClass(“类名”)

b.添加class

$(“…”).addClass(“类名”)

c．移除class

$(“…”).removeClass(“类名”)

jquery添加

1. 创建新元素

   var $new=$(“html代码片段”)

2. 将新元素结尾添加到dom树

   $(parent).append($newelem)

Var $li=$(“<li title=’香蕉’>香蕉</li>”);Var $parent=$(“ul”);$parent.append($li);

jquery删除

$(“…”).remove

//获取第二个

$(“ul li:eq(1)”).remove();

//把< li>元素中属性title不等于“菠萝”的< li>元素移除

$(“ul li”).remove(“li[title!=菠萝]”);

Jquery事件

1. 事件绑定

语法：

$(“…”).blind(“事件类型”,function(e){……})

如：

$(“…”).blind(“click”,function(e){……})

简写形式

$(“…”).click(function(e){……})

$(“#btn”).click(function(e){Console.log(“hello”);})

2. 事件对象

$(“#btn”).click(function (e){Console.log(“hello”);})

这个对象中包含与事件相关的信息，也提供了可以影响事件在dom中传递进程的一些方法。

事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息

Clientx/offsetx/pagex/screenx/x

:事件发生的x坐标

Clienty/offsety/pagey/screeny/y

:事件发生的y坐标

Keycode

：键盘事件中按下的按键的值