jQuery
-
什么是jQuery?
a jQuery是JavaScript的子语言,属于JavaScript库(且兼容CSS3和各种浏览器)
b 提供很多支持浏览器平台的API
c 与JavaScript的语法规则完全不同 -
jQuery的主要功能
a 遍历和操作HTML元素(使用选择器 。获取和设置HTML元素的属性 )
b 设置HTML元素的CSS样式
c 事件处理(事件操作)
d 很方便的实现与Ajax的交互
e 实现动画特效(显示.隐藏.淡入淡出和滑动等) -
jQuery的优点
a 易于使用
b 提供更多的功能强大的API
c 拥有强大的开源讨论区
d 设计更美观.专业的网页 -
jQuery的选择器
id选择器$("#id")
标签名选择器$("div")//选取网页中所有的div元素
根据元素的CSS类选择$(".className")
选择所有HTML元素$("*")
同时选择多个HTML元素$("selector1,selector2,selectorN")
ancestor descendant(祖先 后代)选择器
parent > child(父 > 子)选择器
prev + next(前 + 后)选择器
prev ~ siblings(前 ~ 兄弟)选择器
过滤选择器$(“元素:contains(‘内容’)”) 选取包含 “内容” 文本的元素 $(“元素:empty”) 选取不包含子元素或者文本为空的内容 $(“元素:has(‘#one’)”) 选取id=“one”的元素 $(“元素:has(‘.two’)”) 选取class=“two”的元素
属性选择器
$(“div[id]”) 选择“div”中拥有id属性的元素 $(“div[id=test]”) 选取“div”中id属性值为test的元素 $(“div[id!=test]”) 选取“div”中id属性值不等于test的元素 $(“div[id^=te]”) 选取“div”中id属性值以te开头的元素 $(“div[id$=st]”) 选取“div”中id属性值以st结尾的元素 $(“div[id*=es]”) 选取“div”中id属性值含有es的元素 $(“div[id|=te]”) 选取“div”中id属性值等于te或者以te开头的元素 $(“div[class~=es]”) 选取“div”中class属性值用空格分隔的值中包含es的元素
-
DOM方法
get()方法var jQuery对象 = jQuery选择器.get(索引);
each()方法对象.each(回调函数)
html()方法var Value = jQuery对象.html();
text()方法var Value = jQuery对象.text();
val()方法var Value = jQuery对象.val();/$("元素").val(function(index,oldvalue))
eq()方法var jQuery对象 = jQuery选择器.eq(索引);
append()方法jQuery对象.append(追加内容)
before()方法jQuery对象.before(追加内容)
after()方法jQuery对象.after(追加内容)
find()方法结果集=find(selector)
has()方法jQuery对象. has(子元素名)
empty()方法jQuery对象.empty()
insertafter ()方法被插入的对象.insertAfter(‘元素’)
Clone()方法jQuery对象.clone()
replaceWith()方法被替换的对象.replaceWith(替换的内容 )
replaceAll()方法替换的内容.replaceAll(被替换的对象)
-
jQuery动画
hide():隐藏标签
show():显示标签
toggle() 方法切换元素的可见状态。可见时,隐藏元素;隐藏时,可见元素。
fadeOut():通过透明度隐藏标签
fadeIn():通过透明度显示标签
slideUp():元素将由下到上缩短隐藏
slideDown():元素由上至下延伸显示
自定义动画animate()方法可以使元素动起来