Jquery基本操作

1. jquery

JQuery是一个轻量级的脚本，包含的就是JavaScript的代码库。理念：write less , do more。
1）轻量级
2）强大的选择器
3）出色的DOM操作
4）完善的事件处理机制
5）优秀的浏览器的兼容性
6）丰富插件
7）良好的AJAX
8）链式的代码书写

2. JS对象与JQuery对象

   a) JQuery对象
   JQuery对象就是使用“$(“img”)”，将DOM对象包装起来。一般在JQuery对象前面加上“$”这样与DOM对象区分，它已经是一种公认的命名约定。JQuery对象不能调用DOM对象的属性和方法，同样DOM对象也不能调用JQuery对象的属性和方法。
   b) JQuery对象转成DOM对象
   如果想使用JQuery对象调用DOM对象的方法，怎么办？应该将JQuery对象转换成DOM对象，JQuery对象是一个数组对象，这个很特别。所以只需调用JQueryObj[x]或JQueryObj.get(X);即可转换为DOM对象。
   c) DOM对象转换成JQuery对象
   使用“$(“DOMObj”)”将DOM对象包装起来就可以了。

3. JQuery选择器跟过滤器

1. id选择器
   $("#id")
2. 标签选择器
   $(“button”)
3. 类选择器
   $(".className")
4. 后代选择器
   $(".button #id")
5. 儿子选择器
   $(".button>#id")
6. 亲兄弟选择器
   $("#hello+button")
7. 堂兄弟过滤器
   $("#hello~button")
8. 内容过滤器
   $(“td:contains(‘a’)”)
9. 属性过滤器
   $(“td[name=a]”)
10. 表单过滤器
    $(“input:checked”)

4. 事件绑定

 方式一：
$(“input[type=button]”).click(function(){});
 方式二：
$(“input[type=button]”).bind(“click mouseover”,function(){});
 方式三：
$(‘ul’).on(‘click’, function() {
alert(“Live handler called.”);
});
 方式四：
$(‘ul’).delegate(“li”,‘click’, function() {
alert(“Live handler called.”);
});
 方式五：
$btn.one(“click”,function(){});

5. JQuery文档操作

a)	append() 向每个匹配的元素内部追加内容:
$("div").append("<b>hello.</b>");
b)	appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中:
$("<b>hello.</b>").appendTo("div");
c)	创建JQuery对象
$newObj = $("<b>",{"id":"myId","class":"myclass"});
				$newObj.text("hello"); 
				或者$newObj.html("<b>hello</b>"); 
d)	prepend() 向每个匹配的元素内部前置内容:
$("div").prepend("<b>hello.</b>");
e)	prependTo() 把所有匹配的元素前置到另一个指定的元素元素集合中:
$("<b>hello.</b>").prependTo("div");
f)	after 在每个匹配的元素之后插入内容:
$("div").after("<b>hello.</b>");
g)	before 在每个匹配的元素之前插入内容:
$("div").before("<b>hello.</b>");
h)	empty() 删除匹配的元素集合中所有的子节点:
$("div").empty();
i)	remove() 从DOM中删除所有匹配的元素
$("div").remove(".divCls");

6. 属性

//	设置属性
$("img").attr("src","test.jpg");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
//	删除属性
$("img").removeAttr("src");

7. css

//	添加CSS类
$("b").addClass("selected1 selected2"); 
//	删除CSS类
$("p").removeClass("selected");
//	取CSS属性值
$("p").css("color");
//	设置CSS属性
$("p").css({ color: "#ff0011", background: "blue" });
$("p").css("color","red");

8. 其他

$('p').html();
$("p").html("Hello <b>world</b>!");
$('p').text();
$("p").text("Hello world!");
$("input").val();
$("input").val("hello world!");