|
?
?选择器
1.1基本选择器
??? ?id 选择器：$("#id")、class选择器：$(".class名称")、标签选择器：("标签名称")
??? ?
?1.2 所有选择器：
??? ?语法：$(“*”) 选取页面中所有DOM对象。
??? ?
?1.3 组合选择器
??? ?组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，class，标签名等。
??? ?语法：$(“id,class,标签名”)
??? ?
?1.4 表单选择器
??? ?表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均?? ?
??? ?可做出相应选择。
??? ??? ??? ?$(":input") 匹配所有 input, textarea, select 和 button 元素
??? ??? ??? ?$(":text")选取所有的单行文本框
??? ??? ??? ?$(":password")选取所有的密码框
??? ??? ??? ?$(":radio")选取所有的单选框
??? ??? ??? ?$(":checkbox")选取所有的多选框
??? ??? ??? ?$(":file")选取所有的上传按钮
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<style type="text/css">
?? ??? ??? ?div{
?? ??? ??? ??? ?background: gray;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?.two{
?? ??? ??? ??? ?background: gold;
?? ??? ??? ??? ?font-size: 40px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<title></title>
?? ??? ?<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?function fun1(){
?? ??? ??? ??? ?var obj=$("#one");
?? ??? ??? ??? ?obj.css("background","red");
?? ??? ??? ?}
?? ??? ??? ?function fun2(){
?? ??? ??? ??? ?var obj=$(".two");
?? ??? ??? ??? ?obj.css("background","yellow");
?? ??? ??? ?}
?? ??? ??? ?function fun3(){
?? ??? ??? ??? ?var obj=$("div");
?? ??? ??? ??? ?obj.css("background","blue");
?? ??? ??? ?}
?? ??? ??? ?function fun4(){
?? ??? ??? ??? ?var obj=$("*");
?? ??? ??? ??? ?obj.css("background","green");
?? ??? ??? ?}
?? ??? ??? ?function fun5(){
?? ??? ??? ??? ?var obj=$("#one,span");
?? ??? ??? ??? ?obj.css("background","pink")
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="one">
?? ??? ??? ?我是one的div
?? ??? ?</div><br/>
?? ??? ?<div class="two">
?? ??? ??? ?我是样式是two的div
?? ??? ?</div><br/>
?? ??? ?<div>我是没有id/class的div</div>
?? ??? ?<span>我是span标签</span><br/>
?? ??? ?<input type="button" value="获取id是one的dom对象" οnclick="fun1()"/><br/>
?? ??? ?<input type="button" value="使用class样式获取dom对象" οnclick="fun2()"/><br/>
?? ??? ?<input type="button" value="使用标签选择器" οnclick="fun3()"/><br/>
?? ??? ?<input type="button" value="使用所有选择器" οnclick="fun4()"/><br/>
?? ??? ?<input type="button" value="使用所有选择器" οnclick="fun5()"/>
?? ?</body>
</html>
?过滤器
例如?? ?
?2.1选择第一个first, 保留数组中第一个DOM对象
??? ?语法：$(“选择器:first”) ?
??? ?
?2.2选择最后个last, 保留数组中最后DOM对象
??? ?语法：$("选择器:last")?
??? ?
?2.3选择数组中指定对象
??? ?语法：$(“选择器:eq(数组索引)”)?
??? ?
?2.4选择数组中小于指定索引的所有DOM对象
??? ?语法：$(“选择器:lt(数组索引)”)?
??? ?
?2.5选择数组中大于指定索引的所有DOM对象
??? ?语法：$(“选择器:gt(数组索引)”)
函数
?? ?3.1 第一组
?? ??? ?val
?? ??? ?$(选择器).val() ：无参数调用形式， 读取数组中第一个DOM对象的value属性值
?? ??? ?$(选择器).val(值)：有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值
?? ??? ?
?? ??? ?text
?? ??? ?$(选择器).val() ：无参数调用形式， 读取数组中第一个DOM对象的value属性值
?? ??? ?$(选择器).val(值)：有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值
?? ??? ?
?? ??? ?attr
?? ??? ?$(选择器).attr(“属性名”): 获取DOM数组第一个对象的属性值
?? ??? ?$(选择器).attr(“属性名”,“值”): 对数组中所有DOM对象的属性设为新值
?? ??? ?
?? ?3.2 第二组
?? ??? ?hide
?? ??? ?$(选择器).hide() :将数组中所有DOM对象隐藏起来
?? ??? ?
?? ??? ?show
?? ??? ?$(选择器).show():将数组中所有DOM对象在浏览器中显示起来
?? ??? ?
?? ??? ?remove
?? ??? ?$(选择器).remove() : 将数组中所有DOM对象及其子对象一并删除
?? ??? ?
?? ??? ?empty
?? ??? ?$(选择器).empty()：将数组中所有DOM对象的子对象删除
?? ??? ?
?? ??? ?append
?? ??? ?为数组中所有DOM对象添加子对象，$(选择器).append("<div>我动态添加的div</div>")
?? ??? ?
?? ??? ?html
?? ??? ?设置或返回被选元素的内容（innerHTML）。
?? ??? ?$(选择器).html()：无参数调用方法，获取DOM数组第一个元素的内容。
?? ??? ?$(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容。
?? ??? ?
?? ??? ?each
?? ??? ?each() ：循环遍历DOM数组中的每个元素，对每个元素调用一个函数。?? ??? ??? ?
?? ??? ?语法：jQuery对象.each( function( index, element ) )
?? ??? ?index: 数组的下标
?? ??? ?element: 数组的对象
?
事件
?4.1 定义监听事件
??? ?语法：$(选择器).监听事件名称(处理函数);
??? ?说明：监听事件名称是js事件中去掉on后的内容， js中的onclick的监听事件名称是click
??? ?
??? ?例如：
??? ?为页面中所有的button绑定onclick,并关联处理函数fun1
??? ?$(":button").click(fun1)
??? ??
??? ?为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2
??? ?$("tr").mouseover(fun2)
?
?4.2 on()绑定事件
??? ?on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
??? ??
??? ?语法：$(选择器).on(event,childSelector,data,function)
??? ??? ?event：事件一个或者多个，多个之间空格分开
??? ??? ?childSelector：可选。规定只能添加到指定的子元素上的事件处理程序
??? ??? ?data：可选。规定传递到函数的额外数据，json格式
??? ??? ?function: 可选。规定当事件发生时运行的函数。
?
|