jQuery（2）

jQuery操作DOM

一、内容操作

   1、html()
         设置或读取jQuery对象中的html内容
         类似于原生JS中的innerHTML，可识别标签
   2、text()
         设置或读取jquery对象中的text文本内容
         类似原生JS innerText
   3、val()
         设置或读取表单对象的value值（常见表单控件）

二、属性操作

   1、attr()
         读取或设置jQuery对象的属性
         参数为字符串形式的属性名
         et :
             console.log($('div').attr('id'));
             $('div').attr('class','d1');
   2、removeAttr()
         移除指定的属性，参数为属性名
         et :
             $('div').removeAttr('id');

三、样式操作

   1. attr();
         为元素添加id或class属性，对应选择器样式
   2. addClass('className')
         将className作为值添加到元素的class属性上，匹配选择器样式
         （是可以连缀调用的，可以重复调用）
        et：   $('h1').addClass('c1').addClass('c2')...
   3. removeClass('className');
         移除指定的class属性值
         参数可以省略，省略之后表示清空类选择器
   4. toggleClass('className')
         切换样式，元素如果具备className对应的样式，则移除；
         如果没有，就添加动态切换元素样式
   5. css()
        获取或读取元素CSS属性（样式）
       1、css('width')
         读取元素的宽度
            et：    $('div').css('width');
       2、css('','')
         设置元素的样式
            et:    $('div').css('width','200px');
       3、css(JSON对象)
         作用：为元素设置一组CSS
         参数：为一组CSS样式
         JSON对象 ：是一种约束了格式的对象表现形式
         JSON ：JavaScript Object Notation
         JSON对象的表示方式：
             1. JSON对象必须使用{}括起来
             2. 使用键值对来声明数据（属性与值）
             3. 所有的属性在声明时必须使用字符串形式"",
                 属性值如果也是字符串，也必须使用""
             4. 属性与值之间使用:连接
             5. 多对属性和值之间使用,隔开
         et :
             $('div').css({
                 "color":"red",
                 "width":"300px"
                 ...
             });

四、节点查询

   1、children() / children('selector')

         获取jquery对象的所有子元素，或者获取指定选择器匹配的所有子元素
         注意 ：只包含直接子元素，不考虑后代子元素

   2、find('selector')

         获取满足selector的所有后代元素

   3、prev() / prev('selector')

         获取jQuery对象的前一个兄弟元素，或者获取前一个兄弟元素，必须满足selector

   4、next() / next('selector')

         获取jQuery对象后一个兄弟元素，或者获取后一个兄弟元素，必须满足selector

   5、siblings() / siblings('selector')

         获取前后所有的兄弟元素，或者满足selector的所有兄弟元素

   6、parent()

         获取jQuery对象的父元素

五、节点操作

   1、创建节点（对象）

         $('标签')
         var $h1 = $("<h1>一级标题</h1>");
         var $h2 = $("<h1></h1>");
         h2.html();
         h2.attr();
         h2.css();
         参数为要创建的标签，使用HTML标签语法
         et :
             var $div = $("<div></div>");
             $div.html('动态创建的div');
             $div.attr('id','box');
             $div.css('color','red');
         et2 :
             var $div2 = $("<div id='box' style='color:red;'> 动态创建的div</div>");

   2、添加节点（插入元素）

       1、以子元素的形式插入到页面中（内部插入）
             1、$parent.append($new)
                 将新创建的元素作为最后一个子元素插入
             2、$parent.prepend($new);
                 将新创建的对象作为第一个子元素添加
       2、以兄弟元素的形式插入到页面中
             $obj.after($new)
                 将新创建的对象作为$obj的下一个兄弟元素插入进来
             $obj.before($new)
                 将新创建的对象作为$obj的前一个兄弟元素插入进来

   3、删除节点（元素）

         语法 ：$obj.remove()
         作用 ：将$obj移除掉

六、jQuery 事件操作（处理）

   1. 页面加载完成之后再执行

       原生JS：
             window.onload = function(){};
       jquery语法 ：
             1. $(document).ready(function (){
                     //加载完成之后执行的操作
                 });
             2. $().ready(function (){
                     //加载完成之后执行的操作
                 });
             3. $(function (){});
                     //加载完成之后执行的操作
                 });
       原生onload事件与jQuery的ready()方法区别 ：
             1、原生onload事件不能多次使用，后面的会把前面的覆盖掉，只执行最后书写的onload，需要做特殊处理和判断；
                   而jquery中的ready方法，也表示文档加载完毕，可以重复调用多次，不会被覆盖，所有的相关函数按顺序依次执行
             2、原生的onload事件，会等待文档中DOM树及所有资源全部加载完毕之后才执行；而jquery中的ready方法，会等文档DOM树加载完毕后就执行

   2、jquery事件绑定

       1、使用bind()   
             $obj.bind('事件函数名'，function(){//事件处理函数});
             注意：  事件名称省略on前缀
               et:    $('div').bind("click",function(){});
       2、使用事件函数
             $obj.事件名称(function (){//事件处理});
             注意：事件名称省略on前缀
               et：$('div').click(function(){});

   3、事件对象及属性

       1、获取事件对象与原生方法一致
             都是以参数形式自动传入
             （在绑定事件时，允许传递参数表示事件对象）
             $('div').click(function(evt){
                 console.log(evt);
             });
       2、事件对象的属性与原生的一致（使用方法一致）
             event.target
             event.offsetX
             ...

   4、this对象

         当前函数或方法的调用对象