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 是无效的