jQuery对象与DOM对象的相互转换
1.jQuery对象转换成DOM对象
（index）
var $txtName = $("#txtName"); //jQuery对象
var txtName = $txtName[0]; //DOM对象
get（index）
var $txtName = $("#txtName"); //jQuery对象
var txtName = $txtName.get(0); //DOM对象
2.DOM对象转换成jQuery对象
var txtName = document.getElementById(“txtName”); //DOM对象
var $txtName = $(txtName);
基本选择器
- **标签选择器**:$("h2");
- **类选择器**:$(".title")以class为title的元素
- **id选择器**:$("#titile")以id为title的元素
- 并集选择器:$("div,p")选取所有以div,p的元素
- 全集选择器:$("*")选取所有
层次选择器
1. 后代选择器:$("#meun span")menu中的所有span元素
2. 子选择器:$("#menu>span")menu下的子元素span
3. 相邻元素选择器:$("h2+dl")紧邻着h2元素之后的同辈元素dl
4. 同辈元素选择器:$("h2~dl")h2元素之后的所有同辈元素dl
属性选择器
1. [attribute]-$("[href]")选取含有href属性的元素
2. [attribute=value]-$("[attribute='#']")选取href属性为"#"的元素
3. [attribute!=value]-$("[attribute!='#']")选取href属性不为"#"的元素
4. [attribute ^=value]-$("[attribute ^='#']")选取href属性以"#"为开头的元素
5. [attribute $=value]- $("[attribute $='#']")选取href属性以"#"为结尾的元素
6. [attribute *=value]- $("[attribute *='#']")选取href属性包含"#"的元素
基本过滤选择器
1. :frist-$(“li:first”)选取所有li元素中第一个li元素
2. :last-$(“li:last”)选取所有li元素中最后一个li元素
3. :not(selector)-$(“li:not(.three)”)选取class不是three的元素
4. :even-$(“li:even”)选取索引是偶数的所有li元素(index从0开始)
5. :odd-$(“li:odd”)选取索引是基数的所有li元素(index从0开始)
6. :eq(index)-选取索引等于index的元素(index从0开始)
7. :gt(index)-选取索引大于index的元素(index从0开始)
8. :lt(index)-选取索引小于index的元素(index从0开始)
9. :header-选取所有标题元素,如h1~h6
10. :focus-选取当前获取焦点的元素
11. :animated-选取所有的动画元素
可见性过滤选择器
1. :visible-选取所有可见元素
2. :hidden-选取所有不可见元素
鼠标事件
1. click():鼠标单击时
2. mouseover():鼠标指针移过时
3. mouseout():鼠标移出时
4. mouseenter():鼠标指针进入时(与mouseover的区别:mouseover从父元素移入子元素时会触发mouseover与mouseout-----mouseenter从父元素移入子元素时不会触发mouseenter与mouseleave)
5. mouseleave():鼠标指针移开时
键盘事件
1. keydown()按下按键时触发
2. keyup()释放键盘时触发
3. keypress()产生可打印的字符==(keydown事件发生在键盘被按下的时候,keyup事件发生在键盘被释放的时候,在keydown和keyup之间会触发另外一个事件-----keypress事件)==
绑定事件与移出事件
1. bind(type,[date],fn)绑定事件（date是不必须的）
$("#menu>a").bind({
mouseover: function () {
$("#menu>ul").show();
},
mouseout: function () {
$("#menu>ul").hide();
}
});
2. unbind(type,fn)移出事件:unbind("mouseover")移出mouseover事件
复合事件
-
hover(enter,leave):相当于鼠标的移入与移出事件
$("#menu>a").hover(function(){
$("#menu-ul").show();
},function(){
$("#menu-ul").hide();
}) -
toggle(fn1,fn2,fn3):相当于鼠标连续点击事件第一次单击，触发(fn1)，第二次触发(fn2)
$("#sss").toggle(
function(){
$("#ss").css(“background”,“blue”);
},
function(){
$("#ss").css(“background”,“red”);
}
);
注:一般需使用jquery-1.8.3.min.js才能使用 -
toggle()不带参数是与show和hide的作用一样
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ick(function(){(“p”).toggle();})
点击p元素时在显示与隐藏之间切换 -
toggleClass(className)
可以对样式进行切换,实现事件触发时某元素在’加载某个样式’和’移出某个样式’之间切换
$(document).ready(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … function(){(“p”).toggleClass(“red”)},
)
});
点击一次触发样式,第二次移出样式
JQuery动画
1. 淡入 fadeIn
2. 淡出 fadeOut
3. slideDown:元素会从上向下延伸显示
4. slideUp：元素从下到上隐藏
样式操作
1. .css():设置单个属性
2. .css({"":"","":""}):设置多个属性
3. .addClass(class):设置样式，需是已经有的样式
4. .hasClass(class):判定是否含有指定的样式
内容操作
1. html()：用于获取第一个匹配元素的html内容或文本内容（会获取到选取元素中所有的文本）
2. html(content):用于设置所有匹配元素的html内容或文本内容（）
$("#send").click(function(){
if( $(".chatText").val().length>0){
var vNum = Math.floor(Math.random()*3);
var name2 = "<p id = 'lll'>"+name[vNum]+"</p>";
var img2 = "<div> <img height='50px' src= images/"+img[vNum]+"></div>";
var xi = "<div class='ssss' = 'ssss'>"+$(".chatText").val()+"</div>";
var zon = "<section>"+img2+name2+xi+"</section>";
var str = $(".chatBody").html();
$(".chatBody").html(str+zon);
$(".chatText").val("");
$(".ssss").addClass("sss");
}
});
3.text(）用于获取所有匹配元素的文本内容
4. text(content）用于设置所有匹配元素的文本内容
5. val()获取value的属性值
插入节点
内部插入(在元素内部插入)
1.append(content):向所选择的元素内部插入内容.$(A).append(B)表示将B追加到A中
2.appendTo(content):把所选择的元素追加到另一个指定的元素集合中,$(A).appendTo(B)表示把A追加到B中
3.prepend(content):向每个选择的元素内部前置内容,$(A).prepend(B)表示将B插入A前
4.prependTo(content):将所有匹配元素前置到指定的元素中.该方法仅颠倒了常规prepend()插入元素的操作.$(A).prependTo(B)表示将A前置到B中
外部插入(插入到已选元素外边)
1.after(content):在每个匹配的元素之后插入内容:$(A).after(B)表示将B插入到A之后
2.insertAfter(content):将所有匹配元素插入指定元素的后面，颠倒了after:$(A).after(B)表示将A插入到B之后
3.before(content):在每个匹配的元素之前插入内容:$(A).before(B)表示将B插入到A之前
4.insertBefore(content):在每个匹配的元素之前插入内容，颠倒了before:$(A).before(B)表示将A插入到B之前
//用过滤选择器给h2设置背景颜色和字体颜色
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
var str = "<li>1111</li>";
var str2 = "<li>2222</li>";
var str3 = "<li><input type='button' value='3333'></li>"
$(".gameList").append(str3);
$(str2).prependTo(".gameList");
$(".gameList").after(str); $(".gameList").before(str2);
$(str).insertAfter(".gameList");
$(str2).insertBefore(".gameList")
//li 最后一个 没有边框
$(".gameList li:last").css("border","none");
删除节点
1..remove():删除匹配元素，内容包括（元素包含的文本和子节点）
2..empty():清空节点
3.==(注.remove()方法与detach()方法的不同：前者能删除绑定事件，后者不能删除)==
属性操作
1.attr():可以用来获取与设置元素属性
attr({[name1:value1],[name2:value2],[nameN:valueN]})设置多个属性
$(".contain img").attr({width:"200",height:"80"})
$(selector).attr([name]) //获取属性值
2.removeAttr():可用来删除元素属性
遍历子节点
1..children();:$("section).children();获取某元素的子元素
遍历同辈元素
1.next():用于获取紧邻匹配元素之后的同辈元素.$("li.eq(1)").next()==$("li.eq(2)")
2.prev():用于获取紧邻匹配元素之前的同辈元素.$("li.eq(1)").prev()==$("li.eq(0)")
3.siblings():用于获取位于匹配元素前面与后面所有的同辈元素.$("li.eq(1)").siblings()
遍历前辈元素
1.parent()获取当前匹配元素集合中每个元素的父集元素.$(".hot").parent()
2.parents()获取当前匹配元素集合中每个元素的祖先元素.$(".hot").parents()
其他遍历方法
1.each():$(selector).each(function(index,elemnet)),index表示选择器的index位置,element表示当前
的元素
//遍历了所有的li元素
$("img").click(function () {
$("li").each(function(){
var str = $(this).text()+"</br>";
$("ul").append(str);
});
});
2..end():结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态
即改变了第一个元素的样式也改变了最后一个元素样式
$(".gameList>li").first().css("background-color","#d3f4b5").end().last().css("background-color","#b8e7f9")
(".gameList>li"):返回的状态
表单选择器
1.:input`匹配所有input,textarea,select和button元素
$(“#myform :input”)冒号前要有空格
2.:text`匹配所有单行文本框
3.:password`匹配所有密码框
4.:radio`匹配所有单选按钮
5.:checkbox`匹配所有复选框
6.:submit`匹配所有提交按钮
7.:image`匹配所有图像域
8.:reset`匹配所有重置按钮
9.:button`匹配所有按钮
10.:file`匹配所有文件域
11.:hidden`匹配所有不可见元素或type为hidden的元素
表单属性过滤器
1.：enabled`匹配所有可用元素
2.：disabled`匹配所有不可见元素
$("#userform:disabled")匹配编号输入框
3.:checked`匹配所有被选中元素(复选框，单选按钮。select中的option)
4.：selected`匹配所有选中的option元素
验证表单内容
submit为表单提交方法
$("#myform").submit(function () {
var pwd = $("#pwd").val();
var pwd2 = $("#repwd").val();
//密码非空校验
if(pwd == “”){
alert(“密码不能为空”);
return false;
}
表单验证常用的方法和事件
事件
1.onblur:失去焦点
2.onfocus:获得焦点
方法
1.blur()：从文本域移开焦点
2.focus(): 在文本域设置焦点
3.select():获取文本域中的内容,突出显示输入区域的内容
String对象的方法(常用)
1.match() 找到一个或多个正则表达式的匹配
字符串对象.match(searchString或regexpObject)
2.searcj() 找到与正则表达式相匹配的值
3.replace()替换与正则表达式匹配的字符串
字符串对象.replace(RegExp 对象字符串,"替换的字符串")
4.split(分隔符,n):把字符串分割为字符串数组
字符串对象.split(分隔符,n);
RegExp对象的属性
1.global:RegExp对象是否具有标志g(g代表可以进行全局匹配)
2.ignoreCase:RegExp对象是否具有标志i(i代表不区分大小写匹配)
3.multiline:RegExp对象是否具有标志m(m代表可以进行多行匹配)
正则表达式常用符号
1./../:代表开始与结束
2.^:匹配字符串的开始
3.$:匹配字符串的结束
4.\s:任何空白字符
5.\S:任何非空白字符
6.\d:匹配一个数字字符，等价于[0-9]
7.\D:匹配一个非数字字符,等价于[^0-9]
8.\w:匹配一个数字,下划线或字母字符，等价于[A-Za-z0-9_]
9.\W:任何非单字字符,等价于[^A-Za-z0-9_]
10./.除了换行符之外的任意字符
正则表达式d重复字符
1.{n}:匹配前一项n次
/^\d{10}$/==1234567890
2.{n,}:匹配前一项n次,或者多次
3.{n,m}:匹配前一项至少n次，但是不能多于m次
4.*:匹配前一项0从或多次，等价于{0,}
5.+:匹配前一项1次或多次，等价于{1,}
6.?:匹配前一项0次或1次，等价于{0,1}
validity属性
1.validity属性可以获取表单元素的validityState对象,语法：
var validityState = document.getElementById("Id").validity
2.valueMissing:表单元素设置了required特性,则为必填项.如果必填项的值为空，就无法通过表单验证，
valueMissing属性会返回true，否则返回false,示例:
var user = document.getElementById("user");
if(user.validity.valueMissing == true){
user.setCustomValidity("用户名不可以为空")
}
3.typeMismatch:输入值与type类型不匹配，HTML5新增的表单类型入:email,number,url等，都包含一个原始的类型
验证.如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true,否则返回false，示例:
if(email.validity.typeMismatch == true){
email.setCustomValidity("邮箱格式不正确")
}
4.patternMismatch:输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合oattern验证模式的规则，则
patternMismatch属性将返回true，否则返回false，示例:
if(user.validity.patternMismatch == true){
user.setCustomValidity("开头需是英文字母,长度必须是4-16位")
}
5.custimError:使用自定义的验证错误提示信息。使用 setCustimValidity()方法自定义错误提示信
息:setCUstomValidity(message)会把错误提示信息 自定义为message，此时customError属性值为true；
setCustomValidity(“”)会清除自定义的错误信息，此时customError属性值为false；
扫一扫
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
