本文详细介绍了jQuery中的选择器，包括基础选择器、层次选择器、属性选择器和过滤选择器。同时，讲解了事件处理，如鼠标事件、键盘事件、表单事件，以及事件的绑定与移除。此外，还涉及到了DOM操作，如样式、内容和节点的修改。
js demo : https://dsj-666.gitee.io/css3loading/
选择器
<script>
$(document).ready(function() {
//***************基础选择器*****************
alert($("p").length); //$("p")是签选择器获取方法，要在$(document).ready(function(){});中才起作用
alert($(".my1").html()); //$(".类名")是类选择器，要在$(document).ready(function(){});中才起作用
alert($("#my2").html()); //$("#id值")是id选择器，要在$(document).ready(function(){});中才起作用
alert($(".my,.my1,#my2").html()) //用逗号分隔开，并集(或)选择器，要在$(document).ready(function(){});中才起作用
alert($("p.my1").html()) //去掉并集选择器的逗号，直接写在一起是交集选择器，如标签选择器选中3个，类选择器选中一个，放一起则选中一个my1
alert($("*").length); //选中所有元素，全局选择器
//***************层次选择器（只取后面元素）*****************
$("选择器1+选择器2"); //相邻选择器 选择选择器1后面的选择器2
$("选择器1~选择器2"); //同辈选择器 选择选择器1后面的所有同辈的（同层次的）
$("选择器1 选择器2"); //空格 后代选择器 选择选择器1后面的所有子孙选择器2
$("选择器1>选择器2"); //子代选择器 选择选择器1后面的所有子代选择器2
//***************属性选择器*****************$("[属性名]")
$("[name]"); //选中有name属性的全部元素
$("[name=zahngsan]"); //具体的选择某一个属性如选择name属性为zhangsan的元素
$("[name='zahngsan']"); //上面一种的另一种写法，俩者等效。
$("[class!=a]") //选择class属性中，不为a的所有元素(包含2种，一种是有class元素，但属性值不等于a的，还包含不是class的所有元素)
$("[class$=a]") //选择class属性中，以a结尾的元素
$("[class*=a]") //选择class属性中，含有a的元素
$("[class^=a]") //选择class属性中，以a开头的元素
a
//***************jQuery和dom类型转换*****************
// var $title2 = $("#my");
// alert($title2.html() + "jQuery对象");
// alert($title2.get(0).innerHTML + "jQuery对象转dom对象"); //将jQuery对象看成集合，dom对象看成一个对象，即 集合转单个对象
// alert($title2[0].innerHTML + "jQuery对象转dom对象方法2"); //将jQuery对象看成数组，dom对象看成一个对象，即 集合转单个对象
});
// function init() {
// var title = document.getElementById("my");
// alert(title.innerHTML);
// alert($(title).html() + "dom对象转成jQuey对象");
// }、
<!-- <body οnlοad="init()">初始化调用的函数 -->
//***************过滤选择器*****************$($("ul>li:odd")[1]).html();
$("ul>li:first") ：jQuery对象 加[1] 选出li元素中奇数个的第二个，此时变成DOM对象，因此进行对象类型转换，再套一层$（）变回jQuery对象，才能调用和html()
:first 最开头的那个
:last 最后那个
:even 偶数个
:odd 奇数个
:eq(index) 第index个
:gt(index) 大于index的全部元素
:lt(index) 小于index的全部元素
:not(选择器) 除了什么什么选择器以外
:header 只选择h1,h2…这类元素
:focus 获取当前焦点元素
jQuery 选择器
| 选择器 | 实例 | 选取 |
| $("*") | 所有元素 | |
| $("#lastname") | id="lastname" 的元素 | |
| $(".intro") | 所有 class="intro" 的元素 | |
| $("p") | 所有 <p> 元素 | |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
|
|
|
|
| $("p:first") | 第一个 <p> 元素 | |
| $("p:last") | 最后一个 <p> 元素 | |
| $("tr:even") | 所有偶数 <tr> 元素 | |
| $("tr:odd") | 所有奇数 <tr> 元素 | |
|
|
|
|
| $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） | |
| $("ul li:gt(3)") | 列出 index 大于 3 的元素 | |
| $("ul li:lt(3)") | 列出 index 小于 3 的元素 | |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
|
|
|
|
| $(":header") | 所有标题元素 <h1> - <h6> | |
|
| 所有动画元素 | |
|
|
|
|
| $(":contains('W3School')") | 包含指定字符串的所有元素 | |
| $(":empty") | 无子（元素）节点的所有元素 | |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| $("table:visible") | 所有可见的表格 | |
|
|
|
|
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
|
|
|
|
| $("[href]") | 所有带有 href 属性的元素 | |
| $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 | |
| $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 | |
| $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 | |
|
|
|
|
| $(":input") | 所有 <input> 元素(匹配input、textarea、select、button元素) | |
| $(":text") | 所有 type="text" 的 <input> 元素 | |
| $(":password") | 所有 type="password" 的 <input> 元素 | |
| $(":radio") | 所有 type="radio" 的 <input> 元素 | |
| $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 | |
| $(":submit") | 所有 type="submit" 的 <input> 元素 | |
| $(":reset") | 所有 type="reset" 的 <input> 元素 | |
| $(":button") | 所有 type="button" 的 <input> 元素 | |
| $(":image") | 所有 type="image" 的 <input> 元素 | |
| $(":file") | 所有 type="file" 的 <input> 元素 | |
|
|
|
|
| $(":enabled") | 所有激活的 input 元素 | |
| $(":disabled") | 所有禁用的 input 元素 | |
| $(":selected") | 所有被选取的 input 元素 | |
| $(":checked") | 所有被选中的 input 元素 |
//***************可见选择器*****************
:visible 选取所有可见元素
:hidden 选取所有隐藏元素
</script>
//***************事件，事件函数*****************
Js :onXxx 如onclick();
写在<script>内，ready()外
jQuery 没有on
写在<script>内，ready（）内 例如 $(document).ready(function(){
$(“选择器”).click(function(){
alert(“单击事件”);
})
})
Window事件
click 点击事件
鼠标事件
mouseover()：鼠标悬浮事件
mouseout()：鼠标离开事件 更多看w3school
键盘事件
Keydown() : 键盘从下往下压的过程
Keypress() : 键盘完全压下去的，最底部状态
Keyup(): 键盘弹起来的过程事件(有些情况下会失效)
jQuery链式结构：如： $(“body”).keydown(function(){
alert(“按压”);
});
$(“body”).keyup(function(){
alert(“松开”);
});
这种写法等价于 $(“body”).keydown(function(){
alert(“按压”);
}).keyup(function(){
alert(“松开”);
});
可通过具体按键来控制事件 如下
$(“body”).keydown(function(event){
if(event.keyCode==13) //13是回车的ASCII
alert(“回车”);
}); //按下回车键，弹出提示框
表单事件 ：
focus() 获取焦点事件
blur() 失去焦点事件
如： $(“选择器”).focus（function(){
$(this).css(“background-color”,”red”) //this表示当前元素，是DOM类型对象，加$()，将其转换成jQuery类型对象
}).blur(functionl(){
$(this).css(“background-color”,”white”)
})
颜色值 ：可以用英语单词，也可以用6位十六进制表示
如#000000 表示白色 #FFFFFF表示黑色
如果俩俩相同 如#aabbcc 可写成#abc
绑定事件和移除事件
如： $(“body”).bind(“keydown”,function(){
alert(“bind绑定事件”);
}); //这是绑定单个事件
$(“body”).bind({“keydown”：function(){
alert(“bind绑定事件”);
}, “keyup”:function(){
alert(“bind绑定的第二个事件 注意括号 标点符号的区别”);
}}）；
移除事件 unbind (绑定的意思就是让你有了事件，假如让你有了点击事件，点击，就可以具有某种效果， 解绑就是让你不再有某种效果)
$(…).unbind(“事件名”)；
css选择器优先级 id选择器》类名选择器》标签名选择器（div ,p）》伪类选择器》通配符选择器（*）
伪类选择器
a:link{color:red} //未访问链接的颜色
a:visited {color:red}//已访问的链接
a:hover{color:red} //鼠标滑过的链接颜色
a:active{color:red} //已选中的链接的颜色
复合事件
hover(f1,f2) 相当于mouseover()和mouseout()事件轮番使用
hover(“h2”).hover(function(){},function(){});
toggle() : 版本问题（与jQuery版本有关，1.9以后不支持），多个click()事件轮番循环
如： $(“body”).toggle(function(){
$(this).css(“background-color”,”red”);
},function(){
$(this).css(“background-color”,”black”);
},function(){
$(this).css(“background-color”,”white”);
}); //第一次点击body变红色，第二次点击变黑，第三次变白，第四次变红，轮番
显示效果（隐藏与显示）
hide（）; $(“h3”).hide() //将h3隐藏;
show(); $(“h3”).show() //将h3展示;
toggle(); 切换隐藏与显示
加入时间 $(“h3”).hide(3000) 隐藏时间3000ms，动态过程
回调函数 如 $(“h3”).hide(3000,mycallback); //在隐藏完毕后调用mycallback函数 注意没有括号，只是引用，不是调用
还有$(“h3”).hide(“normal”) // fast,slow 都可以用，但是要加双引号
淡入淡出（透明度）
$(“h3”).fadeOut(“normal”); 和上面一样，可以加时间
fadeIn
控制元素的高度
slideDown() 下拉
slideUp() 上拉 与上面可写内容一样
操作DOM
a.样式操作
jquery对象.css(“属性名”,”属性值”)；
jquery对象.css({“属性名”:”属性值” , “属性名”:”属性值” });//批量操作
给jQuery对象追加样式
$(“选择器名”).addClass(“mystyle mystyle2”); //可加多个样式生效
给jQuery对象删除样式
$(“选择器名”).addClass(“mystyle”); //可移除一个或多个样式括号里什么都没有表示移除全部事件removeClass();
toggleClass(); 轮番切换效果，点一次增加，再点一次移除 $(“mytext”).toggleClass(“mystyle mystyle2”);
内容操作
html()：获取值，获取的是元素 的内容，包含了元素的内部的各种标签
text(xxxx): 获取文本值，获取文本值，文本外表的 div,color等等都原封不动的显示，没有渲染
$(“#mytestId”).html(“…”) 选择改选择器后，通过在html改变内容，表面的div ,color等元素会生效显示，有渲染
val(); 跟上面一样s，括号空的表示获取值 获取value值
val(xxx);跟上面一样，改为括号里面东西， 设置重新设置value()的值为xxx
节点与属性的操作
节点操作
查询节点 （jquery选择器）
创建节点 ：
$(选择器): 获取节点
$(DOM对象)：转换
$(html 字符串), $(“<li>xxx</li>”)
插入节点 ：$(A).append(B) 把B加到A中（内部插入）
$(A).appendTo(B) 把A加到B 中（内部插入）
$(A).after(B) 将B插入A之后（外部插入）
$(A).insertAfter(B) 将A插入B之后 （外部插入）
$(“ul”).prepend($myElement); 将$myElemrnt加入到uL前面 （内部插入）
$(“myElement”).prependTo($(“ul”)); 将$myElemrnt加入到uL前面（内部插入）
Css-dom操作
offset(): 偏移量（左上角的点相对浏览器的位置） 例如： var myoffset=$(“ul”).offset(); alert(myoffset.left+”,”+myoffset.top)
offset(XXX) 设置偏移量 offset(function(){…}) 例如
var myoffset = $("ul").offset(function(index, oldOffset) {
var newOffset = new Object();
newOffset.left = oldOffset.left + 100;
newOffset.top = oldOffset.top + 100;
return newOffset;
});
new一个新对象，将老对象的偏移量各加100偏移量后赋给新的对象，记得return返回新对象，告诉计算机（left是x轴，top是y轴）
oofsetParent(): 获取已经定位的的父节点：如下 父节点为div 没有定位，所以无法获取,先找定位的祖先，再找最近的
定位：元素position(默认为static) 被设置为 relative absoult fixed
$("#uid").click(function() {
$(this).offsetParent().css("border", "blue 10px solid");
})
表单校验
(减轻服务端压力)
- 获取要校验的元素值（选择器） 用户名，密码
- 通过 字符串处理，或者正则表达式的手段进行校验
- 触发校验的方法或事件（校验时机）
blur(): 失去焦点时触发
submit（）：当点提交按钮时触发
onsubmit() javascript写法
onblur()
submit校验
<form id=”myform”>
账号：<input type=”text” id=”id” />
密码：<input type=”text” id =”pwd” />
地址：<input type=”text” id =”address” />
<input type=”submit” value=”” />
</form>
$(“#myform”).submit(function(){
var $id=$(“id”).val();
var $pwd=$(“pwd”).val();
var $ address =$(“address”).val();
if($id<2||$id>12){
return false;}//
return true; //单击submit按钮时触发，通过返回值true|false告知程序是否校验成功
})
blur校验(输入框失去焦点的校验)
$(".input").blur(function() {
var id = $(".input").val();
if (!(id > 0 && id < 10)) {
alert("输入有误")
}
})
如果用onsubmit 记得加return就行
<form id="myform" onsubmit="return check()">
})
正则表达式：用于定义规则
/^$/ 在这个范围内写正则表达式
\d 表示0~9整数 等于[0,9]
\D 表示除了
[1,9] 表示范围1~9内取数
{n} 表示几个这样的
详如下 能用简单的if来设定范围的不必用正则表达式
| 字符 | 描述 |
| * | 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 |
| + | 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 |
| ? | 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。 |
| {n} | n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 |
| {n,} | n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
| {n,m} | m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
| 特别字符 | 描述 |
| $ | 匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身，请使用 \$。 |
| ( ) | 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 \( 和 \)。 |
| * | 匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。 |
| + | 匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 \+。 |
| . | 匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。 |
| [ | 标记一个中括号表达式的开始。要匹配 [，请使用 \[。 |
| ? | 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。 |
| \ | 将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\\' 匹配 "\"，而 '\(' 则匹配 "("。 |
| ^ | 匹配输入字符串的开始位置，除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 \^。 |
| { | 标记限定符表达式的开始。要匹配 {，请使用 \{。 |
| | | 指明两项之间的一个选择。要匹配 |，请使用 \|。 |
| \cx | 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 |
| \f | 匹配一个换页符。等价于 \x0c 和 \cL。 |
| \n | 匹配一个换行符。等价于 \x0a 和 \cJ。 |
| \r | 匹配一个回车符。等价于 \x0d 和 \cM。 |
| \s | 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。 |
| \S | 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 |
| \t | 匹配一个制表符。等价于 \x09 和 \cI。 |
| \v | 匹配一个垂直制表符。等价于 \x0b 和 \cK。 |
<font color="red" id="telTip" style="display: none;font-size: smaller;">电话号码格式不正确</font><br/>
$("#utel").blur(function() {
var $tel = $(this).val(); //正则表达式的使
var $reg = /^1\d{10}$/;
if (!($reg.test($tel))) {
if ($tel = "" || $tel.length == 0) {
$("#telTip").css("display", "none"); //获取焦点后，如果没输入，不显示提示
} else {
$("#telTip").css("display", "inline"); //获取提示后，若输入不满足正则表达式，显示提示
}
} else {
$("#telTip").css("display", "none"); //输入成功，不显示提示
}
});
选择器.each(function(){}) 遍历函数
拿属性值 attr(“属性名”) 例如：
$(":input").each(function() {
alert($(this).attr("name"));
});
$(“选择器”).attr(“value”)等价于$(“选择器”).val()
如果有要选中形式一样的元素 借用function（index，element）中的2个参数来实现 index表示出现的第几个，element相当于this 指代当前选择器
if(index==0)
{}else if(index==1)
{}elseif(index==2){}
多个类试，长的一样的标签，可通过传本身this来区分
给单击事件设置方法传参，点击后将自己传给方法 然后方法打印Value值 还可以打印上一个，下一个的value值
<input type="checkbox" value="basketball" onclick="method(this)" />//方法传参 ，传自己
function method(node) {
alert($(node).val());
alert("before:" + $(node).prev().val());
alert("next:" + $(node).next().val());
}
remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
$.inArray() //用于数组中查找指定的值，返回他的索引
$.inArray(value,arr)
value :用于查找的值
arr：用于查找的数组
jquery中3种高度的区别
width()
innerWidth() padding+
outerWidth() padding+border
如需包含 margin，请使用 outerWidth(true)
delay()方法 delay() 方法对队列中的下一项的执行设置延迟。
animate()方法设置动画 (selector).animate({styles},speed,easing,callback)
动画只对数字有效 background-color:red 是无效的
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
