1.jQuery的选择器学习
基本选择器
id选择器
$("#id名") 返回的是存储了指定的HTML元素对象的数组
标签选择器
$("标签名") 返回的是存储了指定标签的数组类选择器:
类选择器
$(".类选择器") 返回的是使用了相同类选择器的HTML元素对象
组合选择器
$("选择器,选择器,选择器,.....") 返回的是所有选择器所指定的HTML元素对象。
层级选择器
祖先获取所有后代:
$("选择器标签名") 返回的是选择器下的所有指明的后代元素。
选择所有子元素
$("选择器>选择器") 返回的是所有的子元素
选择紧跟的元素
$("选择器+选择器") 返回的是紧跟的元素
选择后面所有的元素
$("选择器~选择器") 返回所有后面的元素(了解)
简单选择器
选择第一个元素:
$("选择器:first") 返回第一个HTML元素选择最后一个
$("选择器:last") 返回第一个HTML元素
去除某个元素:
$("选择器:not(选择器)") 去除选择的HTML元素中的某些元素
奇数偶数
$("选择器:even") 返回角标为偶数的HTML元素
$("选择器:odd") 返回角标为奇数的HTML元素
指定角标
$("选择器:eq(角标)")返回指定角标的HTML元素对象大于角标
$("选择器:gt(角标)")返回大于指定角标的HTML元素小于角标
$("选择器:lt(角标)")返回小于指定角标的HTML元素
内容选择器
包含:
选择器:contains("内容")返回包含指定内容的元素
内容为空:
选择器:empty 返回内容为空的元素对象
含有指定元素对象
选择器:has(选择器) 返回含有指定的元素的元素对象
不为空的元素
选择器:parent 返回内容不为空的元素
可见性选择器
匹配隐藏
$("选择器:hidden") 返回隐藏的HTML元素
匹配可见
$("选择器:visible") 返回可见的HTML元素
属性选择器
属性:$("选择器[属性名]") 返回具备某些属性的HTML元素
属性值:$("选择器[属性名=值]") 返回具备属性且属性值为特定值的HTML元素
不等于特定值$("选择器[属性名!=值]") 返回具备属性且属性值不等于特定值的HTML元素
子元素选择器
表单选择器
2.JQuery操作元素的属性
获取:
对象名.attr("属性名") 返回属性值。返回的是默认值
注意:
如果要获取用户数据使用对象名.val()
修改
对象名.attr("属性名","新的值")
注意:
使用jQuery对象获取紧跟的元素:对象名.next() //返回的是紧跟的jQuery对象
3.JQuery操作元素的内容
获取:
元素对象.html() 返回元素的所有内容包括HTML标签
元素对象.text() 返回所有的文本内容,不包括HTML标签
修改
元素对象.html("新的内容") 会覆盖原有内容,解析HTML标签
元素对象.text("新的内容") 覆盖原有内容,不解析HTML标签
注意:
如果是追加则使用
元素对象.html(元素对象.html()+"新的内容")
元素对象.text(元素对象.text()+"新的内容")
4.jQuery操作元素的样式
添加:
元素对象.css("样式名","样式值");
元素对象.css({"样式名":"样式值","样式名":"样式值","样式名":"样式值",....})
修改
元素对象.css("样式名","新的样式");
注意:
也可以元素对象名.addClass("类选择器名");
5.jQuery操作文档结构
内部插入:
元素对象名.append("HTML代码") 追加(创建新的节点并追加)
元素对象名.appendTo("选择器") 将制定的元素移动并追加到指定的元素中(将别的节点移动到追加)
元素对象名.prepend("HTML代码") 在前面追加(创建新的节点并追加)
元素对象名.prependTo("选择器") 将制定的元素移动并在前面追加到指定的元素中(将别的节点移动到在前面追加)
外部插入:
元素对象名.after("HTML代码") 在元素之后添加
元素对象名.before("HTML代码") 在元素之前添加
元素对象名.insertAfter("选择器") 将指定的节点移动到指定的元素后
元素对象名.insertBefore("选择器") 将指定的节点移动到指定的元素前
6.jQuery的事件机制
元素对象.bind("事件名",fn) 给指定的元素对象追加指定的事件及监听函数
注意:
js中的是一次添加,多次添加会产生覆盖
jQuery是追加的效果,可以实现给一个事件添加不同的监听函数
元素对象.unbind("事件名") 移除指定的元素对象的指定事件
注意:js添加的事件不能移除
元素对象.one("事件名",fn) 给指定的元素对象添加一次性事件,事件被触发执行一次即失效
注意:可以给事件添加多个一次函数,unBind可以用来解绑
页面载入事件
$(document).ready(fn)页面载入成功之后会调用传入的函数对象
注意:此方法可以给页面载入动态的增加多个函数,不会覆盖
js的实现方式:window.onload=function(){}
7.jQuery的动画效果
show-显示隐藏的匹配元素
hide
toggle
8.jQuery操作表格
操作CheckBox 的选择状态使用prop()方法
prop("checked")//返回选择的状态,选择返回true,未选返回false
prop("checked",true)//置为选择状态
prop("checked",false)//置为未选状态
使用each进行遍历
对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
this表示js对象
$(this)表示jQuery对象
parents("标签名")//获取指定的上级元素对象