jquery增删改查与jquery事件

jquery增删改查与jquery事件

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：键盘事件中按下的按键的值