jQuery学习笔记
jQuery代码怎么写
导入jQuery库
<!-- 导入jQuery库,使用scrip标签的src属性 -->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
alert("--");
});
</script>
加载文档
$(document).ready(function(){}); 作用相当于JS当中的 window.onload = function(){}
$(document).ready(function(){}); 可以简写为 $(function(){});
jQuery常用方法
val()方法
返回value值:jQuery对象.val()
对多选框而言:val()方法返回的是被选中的第一个值,而不是全部被选中的值组成的数组
设置value值:传入数组适应性更强
①jQuery对象.val("value")
文本框
密码框
单选下拉列表
②jQuery对象.val(["value01","value02"])
文本框
密码框
单选框
多选框
单选下拉列表
多选下拉列表
each()方法
用来遍历一组元素
each(function(){
在函数体内使用this关键字引用当前正在被遍历的元素
this永远是DOM对象
$(this)转为jQuery对象
});
text()方法
返回文本值:jQuery对象.text()
设置文本值:jQuery对象.text("文本值")
attr()方法
返回属性值:jQuery对象.attr("属性名")
设置属性值:jQuery对象.attr("属性名","属性值")
$.trim()方法:去除字符串前后空格
jQuery特性
隐式迭代
自动遍历所有被选中的p元素,把单击响应函数绑定到每一个p元素上
$("p").click(function(){
//jQuery对象.text()方法可以返回元素节点内的文本值
var text = $(this).text();
alert(text);
});
函数连缀
很多jQuery方法,返回值都是调用对象本身,所以可以以“连缀”的方式,继续进行调用 例如:$("text").focus(...).blur(...)
注意:在使用方法连缀时,一定要留意每个参与连缀的方法的返回值还是不是原来调用的那个对象, 如果不是了,就不能继续连缀,除非你要操作的是这个新的对象
基本选择器
id选择器:#id $("#one")
class选择器:.class $(".mini")
选择元素名:$(元素名) $("div")
所有元素:* $("*")
“,”表示并列关系 $("span,#two") 此时所有span元素和id为two的都会被选中
选择特定class属性的元素 元素名.class $("div.one")
层次选择器
选择后代元素:空格 父元素 后代元素
选择直接子元素:> 父元素>子元素
紧邻的下一个兄弟元素:+ 前元素+后元素 必须是紧邻的
紧邻的后面所有的兄弟元素:~ 前元素~后元素 必须是紧邻的
所有兄弟元素 siblings()这个函数 本身元素.siblings()
选取不相邻的下一个兄弟元素 nextAll(元素名:first)
选取前面的兄弟元素 prev() prevAll()
基本过滤选择器
:first选取第一个元素
:last选取最后一个元素
:not(选择器)选择指定选择器之外的元素
:even 选择索引值为偶数的元素,注意:索引值从0开始
:odd 选择索引值为奇数的元素
:gt(索引值) 选择索引值大于指定索引值的元素
:eq(索引值) 选择索引值等于指定索引值的元素
:lt(索引值) 选择索引值小于指定索引值的元素
:header 选择所有的标题元素
:animated 选择所有正在执行动画的元素
内容过滤选择器
:contains(text) 选择含有指定文本的选择器
:empty 选择空的元素
:has(选择器) 选择包含匹配指定选择器的元素
:parent 选择有子元素或文本元素的元素(当爹的)
可见性过滤选择器
:visible 选择可见的元素
:hidden 选择所有不可见的元素(注意:选中不等于在页面上显示,要想在页面上显示,需借助show()
表单隐藏域无法使用show()方法在页面上显示,但是选中后,可以获取操作其值
属性过滤选择器
[attribut]含有指定属性的元素
[attribut=value]含有指定属性,且属性值为指定值的元素
[attribut!=value]属性值不等于value的元素,注意:没有指定属性的元素也会被选中,如果想准确指定,需使用组合选择器,例如:[title][title!=test]
[attribut^=value]属性值以value开始的元素
[attribut$=value]属性值以value结尾的元素
[attribut*=value]属性值包含value的元素
[selector1][selector2]注意:[selector2]在[selector1]的选择后的结果的范围内进行选择
子元素过滤选择器
父元素:nth-child(索引值) 每一个父元素下指定索引值的子元素,索引值从1开始
父元素:first-child(索引值) 每一个父元素下第一个子元素
父元素:last-child(索引值) 每一个父元素下最后一个子元素
父元素:only-child(索引值) 如果一个父元素下存在着一个单独的子元素,那么就选择它
表单元素过滤选择器
表单元素:enabled 选择可用的表单元素
表单元素:disabled 选择不可用的表单元素
单选框(或复选框):checked 匹配单选框或多选框被选中的
对于多选框来说,所有被选中的元素返回值是一个数组,不能直接使用val()返回所有的值,需要使用each()方法进行遍历
"select :selected" 选择被选中的下拉列表项
$("#btn5").click(function(){
$("select :selected").each(function(){
alert($(this).val());
});
});