jQuery
jQuery是一个优秀的轻量级javaScript框架。jQuery兼容css3和各大浏览器。提供了 dom、event、animate、ajax。 jQuery插件怎么用。
js和jQuery的区别
js对象和JQuery对象不同 但可以相互转化。
js对象转化成jQuery对象：$(js对象)
jQuery对象转化成js对象：jQuery对象[索引]
js和jQuery的事件写法不同但意义相同
js事件是属性；jQuery事件是方法
js响应行为是属性值，jQuery事件是方法
jQuery事件名称不带on
js和jQuery文档加载事件不相同
JQuery的页面加载有简写形式
JQuery的页面加载完成可以有多个，按顺序执行，js只能有一个有效的页面加载完成。
window.onload = function(){
alert("js的页面加载完成");
}
$(document).ready(function(){
alert("jq的页面加载完成");
});
选择器（获取标签 类比CSS）
选择一批或一个标签，用来操作样式和属性
基本选择器
标签选择器：$(“标签名称”)
id选择器:$(("#id")
class选择器:$(".class")
层级选择器
$(“a b”)选择a元素的后代b元素 祖孙关系
$(“a>b”)选择a元素的子元素b 父子关系
$(“a+b”)选择a元素相邻后边的b元素 兄弟关系（同一级）
$(“a~b”)选择a元素的所有b元素 弟弟选择器
属性选择器 是对属性过滤然找到后设置属性
假定a是选择器字符串，attr是属性名称，value是值
$(“a[attr]”)获取有attr属性的a元素
$(“a[attr=’value’]”)获取的attr属性值是value的a元素
$(“a[attr^=’value’]”)获取attr属性值以value开头的a元素
(“a[attr(“a[attr(“a[attr=’value’]”)获取attr属性值以value结尾的a元素
$(“a[attr!=’value’]”)获取attr属性值不等于 value的a元素
$(“a[attr*=’value’]”)获取attr属性值包含value的a元素
$(“a[attr=’value’][attr2]”)复合属性选择器
基本过滤选择器
基本过滤选择器 是对其它选择器的结果进行再次过滤的
:first 取第一个 例如$(“div:first”) 从所有div里获取第一个
:last 取最后一个 $(“.cls:last”)
:not(selector) 排除selector的结果 $(“div:not(.cls)”)
:even 取下标偶数的 $(“div:even”)
:odd 取下标奇数的
:gt(n) 取下标大于n的 $(“div:gt(2)”)
:lt(n) 取下标小于n的
:eq(n) 取下标等于 n的
:header 固定写法，取所有标题h1~h6 $(“:header”)
:animated 取动起来的动画 固定写法$(“:animated”)
表单属性选择器
:enabled 获取可用的表单项标签
:disabled 获取不可用的表单项标签
:checked 针对radio和checkbox的，获取被选中的单选或者多选选项
:selected 针对下拉框的option标签的，获取被选中的下拉选项
Dom操作（需要获取选择器）
dom操作
1．操作标签体/文本/值
操作标签体：相当于js的innerHTML
获取标签体：html()
设置标签体：html(“标签体”)
操作文本：相当于js的innerText
获取文本：text()
设置文本：text(“文本”)
操作值：相当于js的value
获取值：val()
设置值：val(值)
2．操作样式
获取样式：css(“样式名称”)
设置样式：css(“样式名称”,”值”)
3．操作属性
获取属性
attr(“属性名称”);
prop(“属性名称”);
设置属性
attr(“属性名称”,”值”);
prop(“属性名称”,”值”);
删除属性
removeAttr(“属性名称”);
removeProp(“属性名称”);
注意：checked和selected属性操作，必须使用prop的方法；其它方法推荐优先使用attr的方法，如果attr方法不行，再用prop方法。
4．操作class属性
添加class：addClass(“class名称”)
删除class：removeClass(“class名称”)
切换class：toggleClass(“class名称”)
Dom的树型结构
jQuery使用的步骤：
·
通过选择器获得HTML标签对象
获得标签对象后可以使用jQuery里提供的所有方法 对整个的HTML文档进行操作。
获取父节点或者祖宗节点的方法 记录
$(this).closest(’.class’)
好文链接
发表评论