jquery基础

1.概述：jquery是在javascript基础上封装插件，简化对浏览器元素对象的操作。

2.页面加载之后执行方法：

 $(document).ready(function(){//页面加载完之后执行的方法，("#cbutton").click(function(){});监听注册的函数必须写在ready里面才会生效

alert("hello word!")

});

3.jquery对象和DOM对象互相转换

var $aa = $("$aa");

var domaa = $aa[0]或者$aa.get(0)//jquery转成DOM对象

var domaa = document.getElementById("aa");

var $aa = $(aa);//DOM对象转成jquery对象

4.判断id为aa的元素是否存在：

if($("#aa").length>0),而不是if($("#aa")),因为这里返回的适中是一个对象，及时id为aa的元素不存在

5.基本选择器

1.id选择器：$("#aa").css("background","#bbffaa");修改id为aa的元素的背景颜色

2.class选择器：$(".class").css("background","#bbffaa");修改class为class的元素的背景颜色

3.元素选择器：$("p").css("background","#bbffaa");修改所有的p元素的背景颜色

6.层次选择器

$("div span");获取div下面的所有后代为span的元素

$("div>span");获取div下面为span子元素

7.过滤选择器

内容过滤：$("#div:contains('我')");选取内容含有"我"的div元素

属性过滤：$("#div[title=test]");选取属性title为test的div元素

8.获取元素内容和属性

1.$("#aa").text();//获取id为aa的元素的内容

2.$("#aa").attr("title");//attr是用来获取元素的属性

9.节点的动态操作

1.创建节点

var $li = $("<li>新节点</li>");创建一个li新节点

$("ul").append($li);把这个新节点添加到ul里面

2.删除节点

$li.remove();//remove方法删除节点

3.清空节点

$("ul").empty();//清空ul下面子元素

4.替换节点

$("p").replaceWith("<Strong>内容</Strong>");把p元素用Strong元素替换

5.包裹节点

$("p").wrap("<b></b>");用b标签把p元素包裹起来

6.追加样式

$("p").addClass("class");//给p标签添加样式名为class的样式

7.cookie的使用

1.写入cookie：$.cookie("key","value");

2.读取cookie：$.cookie("key");

3.删除cookie：$.cookie("key",null);

8.自定义jquery插件

定义一个jquery.color.js: 自定义插件常用闭包形式

(function($){//$是形参
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);//这里是实参，闭包写法

然后就可以直接引用到color方法了，$("div").color("red");