Jquery2

DOM操作

**1.通过jQuery查找节点**使用$()函数实现，参数传入选择器。**2.通过jQuery创建节点**使用$()函数，参数传入String类型的html元素内容。var $h1 = $(\'<h1>hello world！</h1>\');插入节点方法：1)append和appendTo 在元素末尾（内部）处追加内容2)prepend和prependTo 在元素开始处（内部）追加内容3)after和insertAfter 在元素之后添加内容（外部）4)before和insertBefore 在元素之前添加内容（外部）**3.删除节点**1）$(selector).remove()；2)$(selector).empty();**4.复制节点**var $copy = $(selector).clone(boolean);参数为true或false，如果不填默认为false，代表是否将原节点所绑定的事件也一并复制。**5.设置属性与删除属性**元素属性相关操作使用attr()函数。这个函数是一个双向函数，如果需要设置属性值：$(selector).attr(\'属性名\',\'属性值\');如果需要获取某个元素属性值：var attrValue = $(selector).attr(\'属性名\');删除元素属性：$(selector).removeAttr(\'属性名\');**6.CSS相关设置**jQuery中设置css属性使用css()函数，语法如下：$(selector).css(\'CSS属性名\',\'CSS属性值\');$(\"p\").css(\"color\");$(\"p\").css({ \"color\": \"#ff0011\", \"background\": \"blue\" });$(\"p\").css(\"color\",\"red\");$(\"div\").click(function() {$(this).css({});**7.html()、text()、val()函数**三个函数全部都具备双向性，既能获取元素信息，也能修改元素信息。1）html()用于获取和修改元素内容，类似JavaScript中的innerHTML属性。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。2）text()用于获取和修改元素体内文本内容。结果是由所有匹配元素包含的文本内容组合起来的文本。3）val()用于获取和修改元素value属性值，类似JavaScript中的innerText属性。$(\"#single\").val(\"Single2\");$(\"#multiple\").val([\"Multiple2\", \"Multiple3\"]);$(\"input\").val([\"check2\", \"radio1\"]);<select id=\"single\"><option>Single</option><option>Single2</option></select><select id=\"multiple\" multiple=\"multiple\"><option selected=\"selected\">Multiple</option><option>Multiple2</option><option selected=\"selected\">Multiple3</option></select><br/><input type=\"checkbox\" value=\"check1\" checked/> check1<input type=\"checkbox\" value=\"check2\"/> check2<input type=\"radio\" value=\"radio1\"/> radio1<input type=\"radio\" value=\"radio2\"/> radio2**8.事件**1)bind为元素绑定事件，语法：$(selector).bind(\'事件名称\',[事件数据],function(event){});参数说明：事件名称：指绑定什么事件，可选项：blur,focus,load,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydowm,keypress,keyup,error事件数据：可以传入一些信息进入到回调函数中，在回调函数中通过event.data获取。function(event){}：回调函数，当触发事件时所执行的操作。参数event为发生的时间对象，包含了事件的一些相关信息。例如，通过event对象可以获取到键盘事件中按下的键是哪个。$(\"p\").bind(\"click\", function(){alert( $(this).text() );});$(\"div\").bind({mouseenter:function(){$(this).css(\"color\",\"green\");},mouseleave:function(){$(this).css(\"color\",\"blue\");}});2）unbind调用该函数可以删除掉某个元素上已经绑定的事件。$(selector).unbind(); //移除元素上所有绑定的事件$(selector).unbind(\'click\'); //移除掉元素绑定的所有click事件$(selector).unbind(\'click\',func); // 参数为事件类型和回调函数，移除事件指定处理函数3）on为元素绑定事件，语法：$(selector).on(\'事件名称\'[,选择器][,事件数据],function(event){});on和bind的使用方法类似，但是多了一个参数：选择器该选择器可以过滤出被选中的元素中能触发事件的后代元素，相当于把子代元素的事件【委托】给父级元素，这样可以起到动态绑定效果。4）off$(selector).off(events[,selector][,handler ]);移除一个事件处理函数。5）trigger模拟触发某个事件的发生，可以使用组件调用此函数，代替我们的鼠标、键盘等事件。$(selector).trigger(\'事件名称\'[,额外数据参数])；**9.常用的工具类函数**1）get()语法：$(selector).get([index]);该方法用于返回选择到的所有DOM对象。如果不传参数，则返回值是一个存有所有DOM对象的标准Array数组。如果传参数index，代表根据索引值选择DOM对象，其返回值就是这个DOM对象。2）toArray()无参，用于返回存放所有选择到的DOM对象的Array数组。3）eq()语法：var $input = $(\'input\').eq(index);根据传入的索引值查找一个jQuery中包含的某个DOM元素，并将其单独包装成jQuery对象返回。注意区分：$input[index]和$input.eq(index)4）map()此方法用于对jQuery中的所有DOM元素进行批量操作。var result = $(selector).map(function(){});为选择器选中的jQuery对象中每一个DOM元素分配一个执行事件，返回值为一个类数组。