jQuery
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元素
- =’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’)