JQuery简介
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
JQ库类型说明
完全版jquery-1.4.js 用于测试和开发(未压缩,可读代码)
压缩版jquery-1.4.min.js 用于实际的网站中,已被精简和压缩
JQ引入
可以在线引入
也可以下载本地引入
页面载入
$(document).ready(function(){});
可以简写:$(function(){});
与window.onload的区别
DOM对象转换为Jquery对象
$(dom对象) ==》 jquery对象
jq选择器
-
基本选择器
-
层次选择器
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即过滤选择器都是以冒号(:)开头。-
过滤选择器分类:
1.基本过滤选择器
2.内容过滤选择器
3.可见性过滤选择器
4.属性过滤选择器
5.子元素过滤选择器
6.表单对象属性过滤选择器
-
表单选择器
特殊选择器this
this是JavaScript中的关键字,指的是当前的上下文对象。在js中this是动态的,可以通过call(),apply()等方法改变指向。
在jquery中需要把this加工成jquery对象。
$this=$(this)
this表示当前的上下文对象是一个html的DOM对象,可以调用html对象所拥有的属性和方法。$(this)代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性。
jQuery中的方法
show()
显示隐藏的匹配元素,可带整数参数表示时间, 单位是毫秒。hide()
隐藏显示的匹配元素。可带整数参数表示时间, 单位是毫秒。css(name, value)
给匹配的元素设置csstext(string)
获取或设置匹配元素的文本内容, 不含html标签filter(expr)
刷选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合。addClass(class)
为匹配的元素增加一个类样式removeClass(class)
为匹配的元素移除一个类样式html()
获取或设置匹配元素的内容,包含html标签siblings()
$(".abc").siblings()匹配得到class = abc的其它兄弟元素设置单条样式
.css(“属性名”,”属性值”)设置多条样式
.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})获取样式值
.css(“属性名”)增加类 可增加/删除多个类
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
.removeClass(“”)
.toggleClass(“”)
.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值操作元素中的内容:
设置:
.html(“str”) 设置元素的里面的内容 可用带html标签 js中的innerHTML
.text(“str”) 设置元素的里面的内容 可用不带html标签 js中的innerText
.val(“str”) 设置表单的值 js中的value
.html(),.text()和.val()的差异总结:
1 .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上
2.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
3 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
4 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
例如:
$('li').html(function(n){ return "被点击的元素的索引值是"+n });
将会把所有li元素内的内容替换为返回值,并会把n值变成每个li对应的索引值.
- show(speed,[callback]) / hide( speed,[callback] ) / toggle(speed,[callback])
参数:
speed: 设置显示/隐藏时的速度值,可为fast,slow或毫秒值
callback:显示或隐藏动作完成后调用的函数
toggle()方法:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明
display:none 的元素(但不适用于 visibility:hidden 的元素)
slideUp(speed,[callback] )
slideDown(speed,[callback] )
slideToggle()
fadeIn(speed,[callback] )
fadeOut(speed,[callback] )
fadeTo(speed,opacity,[callback]) //设置淡入淡出效果到一定的不透明度
fadeToggle()
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
例如:
$("ul li").filter(":contains('A1'), :contains('A2'), :contains('A3')").addClass("ABC");