Jquery

Jquery

jquery是一款面非开放的源代码Javascript代码库，引入全新的DOM选择器引擎，同时提供UI库组件。JS是基础，Jquery实际就是JS的封装版

优点：

1. 轻量级
2. 强大的DOM选择器，简化 JavaScript和ajax开发
3. 解决不同浏览器的兼容问题。
4. 提供UI库组件，让页面开发更方便。

dom对象转换为jquery

var obj = document.getElementById("div1");
//dom对象装换为Jquery对象
var jq = $(obj);
alert(jq.html());

jquery对象转换为dom对象

var jq = $("#div1");
var obj = $(jq)[0];
alert(obj.innerHTML);

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

jquery 元素选择器

按标记名称查找

1.dom:

dom: var div1 = document.getElementById("div1");
div1.getElementByTagName("label");

2.jquery:

var msg = $("#div1 label");
var msg = $("#div1").find("label");

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

alert($("#div1 label")[1].innerHTML;

数组长度

alert($("#div1 label").size());

遍历数组

$("#div1 label").each(function(index,data){
    //index微循变量，data为数组中的DOM元素
    //得到元素的DOM对象
    alert(this.innerTHML);
});

jquery元素设置

设置、获得标签中的内容（相当于innerHTML）

1. $("#div1").html("<p>aaa<p>"); //设置内容
2. alert($("#div1").html()); //获得内容

设置、获得value值

1. $("#userName").val("张三"); //设置value值
2. alert($("#userName").val()); //获得value值

显示、隐藏元素

1. $("p").show("slow"); //附加动画，显示元素
2. $("p").hide("show"); //附加动画，隐藏元素

jquery 取消事件

• 取消对象中所有事件—— $("p").unbind();
• 取消对象中所有点击事件—— $("p").unbind('click');
• 取消对象中某一个点击事件—— $("p").unbind('click',fun)