JQuery学习笔记

JQuery选择器

选择器实例选取

*$("*")所有元素

#id$("#lastname")id=lastname的元素

.class$(".intro")所有class="intro"的元素

element$("p")所有<p>元素

.class.class$(".intro.demo")所有class=intro且class=demo的元素

:first$("p:first")第一个<p>元素

:last$("p:last")最后一个<p>元素

:even$("tr:even")所有偶数<tr>元素

:odd$("tr:odd")所有奇数<tr>元素

:eq(index)$("ulli:eq(3)")列表中的第四个元素（index从0开始）

:gt(no)$("ulli:gt(3)")列出index大于3的元素

:lt(no)$("ulli:lt(3)")列出index小于3的元素

:not(selector)$("input:not(:empty)")所有不为空的input元素

:header$(":header")所有标题元素<h1><h2>...

:animated所有动画元素

:contains(text)$(":contains('W3School')")包含文本的所有元素

:empty$(":empty")无子（元素）节点的所有元素

:hidden$("p:hidden")所有隐藏的<p>元素

:visible$("table:visible")所有可见的表格

s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素

[attribute]$("[href]")所有带有href属性的元素

[attribute=value]$("[href='#']")所有href属性的值等于"#"的元素

[attribute!=value]$("[href!='#']")所有href属性的值不等于"#"的元素

[attribute$=value]$("[href$='.jpg']")所有href属性的值包含".jpg"的元素

:input$(":input")所有<input>元素

:text$(":text")所有type="text"的<input>元素

:password$(":password")所有type="password"的<input>元素

:radio$(":radio")所有type="radio"的<input>元素

:checkbox$(":checkbox")所有type="checkbox"的<input>元素

:submit$(":submit")所有type="submit"的<input>元素

:reset$(":reset")所有type="reset"的<input>元素

:button$(":button")所有type="button"的<input>元素

:image$(":image")所有type="image"的<input>元素

:file$(":file")所有type="file"的<input>元素

:enabled$(":enabled")所有激活的input元素

:disabled$(":disabled")所有禁用的input元素

:selected$(":selected")所有被选取的input元素

:checked$(":checked")所有被选中的input元素

jquery的$().each,$.each的区别

在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。

$().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}

回调函数是可以传递参数，i就为遍历的索引。

对于遍历一个数组，用$.each()来处理，简直爽到了极点。例如：

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为：”+n.name);
});

参数i为遍历索引值，n为当前的遍历对象.

each处理json数据，这个each就有更厉害了，能循环每一个属性

var obj = { one:1, two:2, three:3};      
 　　each(obj, function(key, val) {      
      　　alert(key);   
      　　alert(val);      
 　　});

这里alert(key)将输出onetwothree

alert(val)将输出one，1，two，2，three,3

jQueryCSS操作-css()方法

css()方法返回或设置匹配的元素的一个或多个样式属性。

设置<p>元素的颜色：

$(".btn1").click(function(){
  $("p").css("color","red");
});

返回第一个匹配元素的样式属性。

$(selector).css(name)

name参数可以包含任何字符串类型的CSS属性名。比如"color"：

取得第一个段落的color样式属性的值：

$("p").css("color");

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

事件操作

触发实例：

$("button#demo").click()

绑定实例：

$("button#demo").click(function(){$("img").hide()})

属性操作

addClass()方法

$("button").click(function(){
  $("p:first").addClass("intro");
});

提示：如需添加多个类，请使用空格分隔类名。

$(selector).addClass(function(index,oldclass))

参数描述

function(index,oldclass)必需。规定返回一个或多个class的函数。

该函数可接收并使用选取器的index值和当前class。

attr()方法

attr()方法设置或返回被选元素的属性值。

JQueryAjax

$.ajax({  
	                    type : "POST",  //提交方式  
	                    url : "${pageContext.request.contextPath}/org/doDelete.action",//路径  
	                    data : {  
	                        "org.id" : "${org.id}"  
	                    },//数据，这里使用的是Json格式进行传输  
	                    success : function(result) {//返回数据根据结果进行相应的处理  
	                        if ( result.success ) {  
	                            $("#tipMsg").text("删除数据成功");  
	                            tree.deleteItem("${org.id}", true);  
	                        } else {  
	                            $("#tipMsg").text("删除数据失败");  
	                        }  
	                    }  
	                });

ajaxSubmit

$(document).ready(function(){
      $('#Form1').bind('submit', function(){
      var account= $('#account]').val(),
     var password= $('#password').val();
      $(this).ajaxSubmit({         type: 'post', // 提交方式 get/post         url: 'your url', // 需要提交的 url
	 dataType : "json", 数据类型
         data: {
            'account': account,
            'password': password
         },
         success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
            // 此处可对 data 作相关处理
            alert('提交成功！');
         }
         //$(this).resetForm(); // 提交后重置表单
   });
      return false; // 阻止表单自动提交事件
   });
});

JQuery和DOM对象转换

先是DOM对象转换为jQuery对象：

//获取DOM对象  
	        var username=document.getElementById("username");  
	        alert(username.value);  
	          
	        //转换为jquery对象 转换后就可以使用jQuery中的方法了  
	        var $username=$(username);  
	        alert("^^^"+$username.val());  
	    </script>

jQuery对象转换成DOM对象

l两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

//获取jQuery对象  
	        var $username=$("#username");  
	        alert($username.val());  
	          
	        //转换成DOM对象  
	        //(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象  
	        var username=$username[0];  
	        alert(username.value);  
	          
	        //jQuery本身提供，通过.get(index)方法，得到相应的DOM对象  
	        //转化为DOM对象  
	        var username1 = $username.get(0);  
	        alert(username1.value);

body中的onload()函数和jQuery中的document.ready()有什么区别？

onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){
$(this).hide();
});

2、当元素在当前页面中不可用时，可以使用delegate()

bind()

简要描述

bind()向匹配元素添加一个或多个事件处理器。

使用方式

$(selector).bind(event,data,function)

event：必需项；添加到元素的一个或多个事件，例如click,dblclick等；

　　　　单事件处理：例如$(selector).bind("click",data,function);

　　　　多事件处理：1.利用空格分隔多事件，例如$(selector).bind("clickdbclickmouseout",data,function);

　　　　　　　　　　2.利用大括号灵活定义多事件，例如$(selector).bind({event1:function,event2:function,...})　

　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

data：可选；需要传递的参数；

function：必需；当绑定事件发生时，需要执行的函数；

适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。

on()

on()为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用on()方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式　

$(selector).on(event,childselector,data,function)

event：必需项；添加到元素的一个或多个事件，例如click,dblclick等；

单事件处理：例如$(selector).on("click",childselector,data,function);

多事件处理：1.利用空格分隔多事件，例如$(selector).on("clickdbclickmouseout",childseletor,data,function);

　　　　　　2.利用大括号灵活定义多事件，例如$(selector).on({event1:function,event2:function,...},childselector);　

　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

childSelector:可选；需要添加事件处理程序的元素，一般为selector的子元素；　　

data：可选；需要传递的参数；

function：必需；当绑定事件发生时，需要执行的函数；

ajax-serialize()方法

serialize()方法通过序列化表单值，创建URL编码文本字符串。