关于jquery添加事件的实例讲解

1、在使用jquery添加事件时，最容易出错的就是当前使用的对象到底是dom还是jquery对象

jquery对象和dom对象互换

dom转换为jquery                              jquery 转为dom

var obj;                                                         var $ jq = $(#p1");

var $jq = $(obj);                          var obj = $(jq)[0];

2、jquery添加事件，全部是现代事件添加，一个事件可以绑定多个函数

$(function() 相当于window.onload = function(){} 而jquery两个方法都可以被被执行，一个事件

可以绑定多个函数。同样的适用于onclick   change 。

$(function(){

    alert("编程技术");

});

$(function(){

    alert("网页技术");

});

3、jquery元素设置值和获得值

设置、获得标签中的内容（相当于innerHMTL），其中的内容和value要注意区分。

$("#p1").html("<p>aaa</p>");//设置内容

alert($("#p1").htmle());//获得内容

设置、获得value值

$("#userName").val("张三")；//设置value值

$("#userName").val();//获得值

对于span没有value属性可以自定义一个属性

<pid="titlep">

<spanvalue="编程技术"id="defSpan">编程技术</span>

<spanvalue="计算机网络">计算机网络</span>

</p>

通过attr来获得他的属于值

alert($("#titlepspan").attr("value"))

4、jquery常用的方法

4.1 jquery元素选择器

 var msg = $("#p1 label");//已知id号可以这样用

 var msg = $("#p1").find("label")//已知对象 例如：vartdArray=trObj.find("td");

4.2 jquery获得子元素的值

取得数据第几个元素，返回dom对象

$("#p1label")[1].innerHTML;

遍历数组

$("#p1label").each(function (index,data){

index为循环变量,data为数组中的DOM元素

alert(this.innerHTML);

});

4.3 下拉框多选，和复选框的多选。

首先要给select加multiple属性

<select id="leftSelect"multiple >

    <option>张灵甫</option>

    <option>杜律明</option>

    <option>薛岳</option>

    <option>戴安澜</option>

    <option>王耀武</option>

    <option>李宗仁</option>

</select>

获得方法：    完整代码稍后附在后面

<input type="button" value=">" onclick="$('#rightSelect').append($('#leftSelect option:selected'));"><br>

复选框，可以只用看它的checked属性

$(function(){

    $("#headBox").click(function(){

        var x = this.checked;

        //得到所有name属性为stuidy元素集合

        $("[name = stuId]").each(function(){

            this.checked = x;

        })

    });

});

单选框和复选框判断是否选中：checked  

列表框和下拉框判断是否选中：selected

4.4jquery动态查询

如果包含所要查询的queryStr则为true

if(book[id].name.indexOf(queryStr)!=-1){

｝

4.5 通过name,type,class获得元素

$("#data .aa").each(function(){} 获得类型为aa的子元素

[name = stuId]"  获得name为指定内容的元素

input[type=text]  获得类型为text的元素

$("#data .aa").each(function(index,obj){

 var $(obj).find("input[name = 'stuId' type='text']");

})