jQuery中的Dom操作及jQuery中的事件

对Dom元素的操作，换句简单的话来说，就是对元素的属性进行操作。
下面来介绍各种方法。

• 获取或设置元素的属性值 attr()    prop()
  设置元素的属性值：
  $(“input[type=‘button’]”).attr(“value”,“按钮1”);
  获取元素的属性值：
  $(“input[type=‘button’]”).attr(“value”)
  一次设置多个属性值 但不能一次获取多个属性值
  二者的区别：
  prop()可以拿到通过脚本设置的属性值，而attr()不可以

    var ck=$("input[type='checkbox']");
    ck.click(function (){
        console.log($(this).attr("checked"));
    });               //用attr输出为undefined，拿不到值，而用prop能拿到

• 删除元素的属性removeAttr()    removeProp()
  removeProp()只能移除自定义的属性，不能移除本身的值，而removeAttr()二者都可移除

• 元素内容的操作html()     text()

• 操作dom元素的css , css()获取或设置元素的样式
  $("#txt").css(“borderColor”,“red”);
  $("#txt").css(“borderColor”);    //得到的是rgb值
  ※将rgb值转换为16进制值的方法：

        var color=$("#txt").css("borderColor");
        var str=(function(c){
        var a = c.split(",");
        var r = parseInt(a[0].split("(")[1]);
        var g = parseInt(a[1]);
        var b = parseInt(a[2].split(")")[0]);
        //#690a0a  rgb  r:69 g:0a b:0a
        return "#" + ((r << 16) + (g << 8) + b).toString(16);   
    })(color)
    console.log(str);

• 类名称的添加 addClass()
  $("#btn").addClass(“btninfo”);添加多个类名称，中间用空格隔开
  移除类名称removeClass(),不加参数代表全部移除
  类的切换 toggleClass(),若有这个类则移除，若没有这个类就添加上

• jquery操作子父节点的问题
  (1)children()找父元素的子节点
  (2)$(“ul>li”).first() 找第一个子元素li

  (3)$(“ul>li”).last()找最后一个子元素li
  (4) $(“ul>li”).eq(0)索引为0的li
  (5)找同胞元素
  siblings()不加参数，找所有的同胞元素，参数可以是要找到元素标签，或者是类名称等，就能找到特定的元素
  (6)filter() 过滤元素
  (7)is() 判断当前对象是谁

• 创建dom元素的方法
  var str=$(""); 中间参数为要创建的标签名
  创建完成的对象追加给父级元素（插入节点）
  （1）内部插入节点 append appendTo prepend prependTo
  append appendTo追加到当前元素的内容之后

  $(".block").append(str);
  str.appendTo($(".block"));

prepend prependTo 追加到当前元素的内容之前

$(".block").prepend(str);
str.prependTo($(".block"));

（2）外部插入节点 after before insertBefore insertAfter
after insertAfter 追加到当前元素之后
before insertBefore 追加到当前元素之前
(3)dom元素复制节点的方法 clone
默认参数为false (只是复制元素) 若为 true 则表示深度克隆包括其事件和行为等等
（4）dom元素的替换

• 包裹节点
  wrap() 用元素（对象或者字符串）包裹被选择元素 ，包的是一个元素
  wrapAll() 用元素（对象或者字符串）包裹被选择元素 ，包的是多个被选择元素
  unwrap()移除被包裹元素的父级元素或者包裹标记
  wrapInner() 用包裹元素包裹被选择的元素的子元素
• 元素的遍历each()
  在each中，return false提前终止遍历

元素的事件

• 基本绑定

 $("#btn").click(function () {
        console.log(1);
    }).mouseenter(function () {
        console.log(2);
    }).mouseleave(function () {
        console.log(3);
    });                 //链式结构

• bind （）
  定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

• on （）

在绑定和移除是与bind相同，区别在于on()可以进行事件的委托,bind()不行

• hover()事件的切换 ,相当于鼠标的进入离开
• one()一次性事件
• trigger() 触发事件 ,写在事件之后
• 自定义事件

    $("#txt").bind("mytxt",function (e,a,b,c){
        console.log(c);
    });
    $("#txt").trigger("mytxt",[1,2,3]);           //传多个值时要写成数组的形式