标签：1.5 another 错误 contains data 资源 UI enable val
一、选择器:
Id选择器:
$(“#one”).css(“bcakground”,”red”);
类选择器:
$(“.mimn”).css(“background”,”red”);
标签选择器:
$(“div”).css(“background”,”red”);
通配符选择器:
$(“*”)..css(“background”,”red”);
组合选择器:
$(“span”,”#one”).css(“background”,”red”);
总结:
JQuery中的基本选择器:
ID选择器 类选择器 标签选择器 通配符选择器 群组选择器
$("#id"); $(".className"); $("div"); $("*"); $("h2,h3,.cc");
选择body内的所有div元素:
$(“body div”).css(“background”,”red”)
在body内选择子元素是div的
$("body > div").css("background","red");
Id为one 的下一个兄弟元素:
$("#one + div").css("background","red");
id为two的元素后面的所有div兄弟元素:
$(“#one ~ div”).css("background","red");
层次选择器:从父子关系和兄弟关系来进行选择页面节点
$("a b"); :a节点的所有后代节点b都被选中
$("a > b"); :a节点的所有子节点b都被选中
$("a + b"); :a节点之后的第一个兄弟节点b
$("a ~ b"); :a节点之后的所有兄弟节点b
选择第一个DIV元素
$(“div : first”).css("background","red");
选择最后一个div元素
$("div:last").css("background","red");
选择class不为one的所有div元素
$("div:not(.one)").css("background","red");
选择索引值为偶数的div元素 even:偶数 odd:奇数
$("div:even").css("background","red");
选择索引值为奇数的div元素
$("div:odd").css("background","red");
选择索引值等于3的元素
$("div:eq(3)").css("background","red");
选择索引值大于3的元素
$("div:gt(3)").css("background","red");
选择索引值小于3的元素
$("div:lt(3)").css("background","red");
选择所有的标题元素
$(":header").css("background","red");
选择当前正在执行动画的所有元素
$(":animated").css("background","red");
基本过滤选择器:
从位置的角度来对页面的标签进行过滤选择
$("tagName:first");
$("tagName:last");
$("tagName:eq(2)");
$("tagName:gt(2)");
$("tagName:lt(2)");
$("tagName:odd");
$("tagName:even");
$(":header");
$(":animated");
$("tagName:not(.one)")
选取含有文本"di"的div元素
$("div:contains(‘di‘)").css("background","red");
选取不包含子元素(或者文本元素)的div空元素.
$("div:empty").css("background","red");
选取含有class为mini元素 的div元素. $("tagName:has(.mini)")
1.选中的是DIV元素 2.子元素中的class值为mini
$("div:has(.mini)").css("background","red");
选取含有子元素(或者文本元素)的div元素.
$("div:parent").css("background","red");
内容过滤选择器总结:节点值是否为空,节点上的文本中是否包含指定的字符串,子元素中的class值是否为指定的值
$("tagName:empty");
$("tagName:parent");
$("tagName:contains(‘aaa‘)");
$("tagName:has(.one)");
选取含有属性title的div元素.
$("div[title]").css("background","red");
选取属性title值等于test的div元素.
$("div[title=‘test‘]").css("background","red");
选取属性title值不等于test的div元素.
$("div[title!=‘test‘]").css("background","red");
选取属性title值以te开始 的div元素.
$("div[title^=‘te‘]").css("background","red");
选取属性title值以est结束的div元素.
$("div[title$=‘est‘]").css("background","red");
选取属性title值含有es的div元素.
$("div[title*=‘es‘]").css("background","red");
组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$("div[id][title*=‘es‘]").css("background","red");
属性过滤选择器:从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤
$("tagName:[id]");
$("tagName:[id=‘cc‘]");
$("tagName:[id!=‘cc‘]");
$("tagName:[title^=‘cc‘]");
$("tagName:[title$=‘cc‘]");
$("tagName:[title*=‘cc‘]");
$("tagName:[title*=‘cc‘][name=‘ee‘][id!=‘ff‘]");
选中所有可见的div元素 $("div:visible"),设置样式;
$("div:visible").css("background","blue");
1.选中不可见的所有元素 $("body :hidden").lenth;
2.选中不可见的DIV元素 $("div:hidden");
3.选中所有不可见的文本隐藏域 $("input:hidden")
4.让所有不可见的DIV元素3秒内显示并且设置其为背景色$dm.show(3000).css("background","red");
选中body元素下看不到的元素,包含隐藏表单组件 ,这里有空格，代表层次选择器
alert($("body :hidden").length);
alert($("div:hidden").length);
alert($("input:hidden").length);
所有不可见的div元素在3秒内显示
$("div:hidden").show(3000);
可见性选择器:根据页面上的元素是否显示来选择节点
$("tagName:visible");
$("tagName:hidden");
$("tagName :hidden"); 选中标签tagName下所有隐藏的元素,包括隐藏表单组件slow normal fast
选取class为one的div下的第2个子元素
$("div.one :nth-child(2)").css("background","blue");
选取class为one的div下的第1个子元素
$("div.one :first-child").css("background","blue");
选取每个父元素下的最后一个子元素
$("div.one :last-child").css("background","blue");
如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$("div.one :only-child").css("background","blue");
子元素过滤选择器:选择父元素下的子元素(第1个,最后1个,唯一的一个,第几个子元素)
$("tagName :first-child"); $("tagName :last-child");
$("tagName :only-child"); $("tagName :nth-child(2)");
选中所有可用元素 $("input:enabled")
$("input:enabled").val("AAA");
选中所有不可用元素 $("input:disabled")
$("input:disabled").val("BBB");
总结:从表单组件的可用还是不可用来进行选择节点
选中页面上的2个按钮<input type="button"/> <button>
alert($("#form1 :button").length);
选中表单下的<button>
alert($("#form1 button").html("AAA"));
alert($("#form1 :checkbox").length);
$("#form1 :checkbox:eq(0)").attr("checked","true");
选中id为form1的表单小的input开头的组件
alert($("#form1 input").length);
选中id为form1下的所有表单组件 包括textarea button select
alert($("#form1 :input").length);
选中id为form1表单下的所有不可见元素
alert($("#form1 :hidden").length);
二、JQueryDom节点操作
获取p节点
var $pDm=$("p");
输出p节点的title属性
alert($pDm.attr("title"));
//获取第2个li节点
var $li_2=$("ul li:eq(1)");
//输出第2个li节点的title属性
alert($li_2.attr("title"));
//输出第2个li节点的文本内容
alert($li_2.html());
创建2个li节点,要求这2个li节点包含文本包含属性title
var $dm1=$("<li title=‘西瓜44‘>西瓜</li>");
var $dm2=$("<li title=‘香蕉55‘>香蕉</li>");
//将新创建的第1个li节点追加到ul节点下的最后一个子节点
$("ul").append($dm1);
$("ul").append($dm1);
//将新创建的第2个li节点追加到ul节点下的第一个子节点
$("ul").prepend($dm2);
var $dm1=$("<li title=‘葡萄44‘>葡萄</li>");
var $dm2=$("<li title=‘西瓜55‘>西瓜</li>");
var $dm3=$("<li title=‘香蕉66‘>香蕉</li>");
var $ulDm=$("ul");
var $li_2=$("ul li:eq(1)");
//用2种方式来将创造的第1个节点添加到ul下的最后一个子节点
//$ulDm.append($dm1);
//$dm1.appendTo($ulDm);
//用2种方式来讲创造的第2个节点添加到ul下的第一个子节点
//$ulDm.prepend($dm2);
//$dm2.prependTo($ulDm);
//用2种方式将创造的li节点追加到第2个已经存在的li节点之后
//$li_2.after($dm3);
//$dm3.insertAfter($li_2);
//用2种方式将创造的li节点追加到第2个已经存在的li节点之前
//$li_2.before($dm3);
//$dm3.insertBefore($li_2);
自杀:直接找到我们要操作的节点删除即可.
$("ul li:eq(1)").remove();
jquery种删除掉的节点还可以继续获得
var $dm=$("ul li:eq(1)").remove();
$dm.appendTo($("ul"));
JQuery中删除节点可以加过滤条件
$("ul li").remove("li[title!=菠萝]");
获取第2个li节点后,将其元素中的内容清空
$("ul li:eq(1)").empty();
在JQuery中有很多类似的操作,获取节点的文本,获取节点的属性,
$dm.html(); $dm.html("AAAA");
$dm.attr("title"); $dm.attr("title","BBBBB");
获取样式
alert($("p").attr("class"));
设置样式 原先的样式不存在
$("p").attr("class","high")
追加样式 原先的样式还存在
$("p").addClass("high")
删除全部样式
$("p").removeClass()
删除指定样式
$("p").removeClass("high");
重复切换样式 $dm.toggleClass("another");
$("p").toggleClass("high");
判断元素p是否含有某样式 $dm.hasClass("another")
alert($("p").hasClass("high"));
JQuery提供了丰富的API让我们操作节点的样式:
获取节点的样式,设置节点的样式,追加节点的样式,删除节点的样式(全部,指定)
重复切换样式,判读节点是否包含指定的样式
alert($("p").css("color"));
设置<p>元素的color
$("p").css("color","red");
设置<p>元素的fontSize和backgroundColor $dm.css({"k1":v1,"k2":v2});
$("p").css({"fontSize":30,"backgroundColor":‘pink‘});
获取<p>元素的高度
alert($("p").height());
获取<p>元素的宽度
alert($("p").width());
设置<p>元素的高度
$("p").height("100px");
设置<p>元素的宽度
$("p").width("300px");
获取<p>元素的的左边距和上边距 $dm.offset(); $dm.left $dm.top
var obj=$("p").offset();
alert(obj.left);
alert(obj.top);
JQuery中对节点的样式操作,有2种实现方案:
第一种是将节点的样式作为节点的一个属性来进行整体操作
$dm.attr("class","myClass");
第二种方案通过节点的CSSDOM来控制节点的样式
$dm.css("background","red");
$dm.css("background");
利用JQuery的chldren方法来获取页面上所有的body子元素
alert($("body").children().length);
var dms=$("body").children();
for(var i=0;i<dms.length;i++){
alert(dms[i].innerHTML);
页面加载完毕之后,获取p节点后的同辈元素,输出其文本内容
页面加载完毕之后,获取p节点前的同辈元素,输出其文本内容
页面加载完毕之后,获取p节点所有的同辈元素
window.onload=function(){
//获取p节点之后所有的同辈元素
var dms=$("p").nextAll();
//for(var i=0;i<dms.length;i++){
// alert(dms[i].innerHTML);
//}
//获取节点P之前所有的兄弟节点
//dms=$("p").prevAll();
//for(var i=0;i<dms.length;i++){
// alert(dms[i].innerHTML);
//}
//获取p节点所有的兄弟节点
dms=$("p").siblings();
for(var i=0;i<dms.length;i++){
alert(dms[i].innerHTML);
}
获取<p>元素的HTML代码 $dm.html();
如果p节点中有HTML标签,那么标签也会被返回
alert($("p").html());
获取<p>元素的文本
通过方法text返回节点的内容,如果节点上包含HTML标签,那么这些标签不会被返回,仅仅返回文本信息
alert($("p").text());
PS: $dm.html(); $dm.text(); 区别:
设置<p>元素的HTML代码 $dm.html("夹杂HTML标签");
//如果文本中包含对应的HTML标签,那么这些标签将会被浏览器作为普通标签来识别
$("p").html("<span style=‘background:red‘>DDDDD</span>");
设置<p>元素的文本 $dm.text("不夹杂html标签");
$("p").text("FFFFFF");
设置<p>元素的文本 $dm.text("夹杂HTML标签");
如果文本中包含了HTML标签,那么这些标签将会作为内容来识别
$("p").text("<span style=‘background:red‘>DDDDD</span>");
获取当前按钮的value值
alert($("#btn1").val());
设置当前按钮的value值
$("#btn2").val("我是后来设置的内容");
在JQuery中获取和设置节点的文本有2种方式:$dm.html() $dm.text();
注意区分2者的不同之处
获取：
1、html()不仅能获取文本内容，还可以获取标签内容
2、text()仅仅获取文本内容
设置：
1、html()设置的文本中含有标签时，会被浏览器进行解析
2、text()设置的文本内容中含有标签时，不会被浏览器进行解析，作为字符串处理
获取和设置节点的value值用 $dm.val();
用JQuery的方式为页面上的按钮绑定事件
$("#address").bind("focus",function(){
if(this.value==‘请输入邮箱地址‘){
this.value="";
}
});
$("#address").bind("blur",function(){
if(this.value==‘‘){
this.value="请输入邮箱地址";
三、Jquery的事件
window.onload=function(){
alert("BBBBB");
}
JQuery提供的 页面加载完毕之后执行function中的代码
$(document).ready(function(){
alert("CCCCCC");
});
简写形式
$(function(){
alert("DDDDDD");
});
区别:
1.用window.onload的方式来加载页面:必须等页面上所有的元素(图片,.js文件,CSS文件)全部传递到客户端之后才去执行其中的代码
2.用JQuery的形式来加载页面,页面上的DOM树形成了,无需等到所有资源加载完毕之后才去执行代码
3.可以绑定的函数不一样 window.onload只能绑定1个函数 用JQuery的形式可以绑定多个
JQuery为节点pv绑定事件之前已经做过判断处理了
window.onload=function(){
var dm=document.getElementById("pvv");
//为了保证代码的健壮性,为页面中的 节点绑定各种事件之前需要做大量的判断
if(dm!=null){
dm.onclick=function(){alert("ZZZZ");}
}
alert("ZZZZZZZ");
}
$("#pvv").bind("click",function(){alert("AAAAAA");});
alert("AAAAAAA");
});
获取id为panel下的class的值为head的h5元素,
* 为这个元素用JQuery的原始方式绑定点击事件
* 让当前元素的下一个兄弟节点显示
$("#panel h5.head").bind("click",function(){
$(this).next().show();
});
用JQuery的这种事件绑定方式可以很方便的实现 代码和内容分离, html标签和JS代码没有任何掺杂.
* 页面加载完毕之后为id为panel下的class值为head的h5元素用原始方式绑定一个click事件,
* 获取当前节点的下一个兄弟元素$content
* 当$coantent元素为的状态为可见状态是$dm.is(":visible")让节点$content节点隐藏.
* 否则让节点$content节点隐藏.
$("#panel h5.head").bind("click",function(){
var $dm=$(this).next();
//判断当前节点是否是显示
if($dm.is(":visible")){
$dm.hide(); //让当前节点隐藏
}else{
$dm.show(); //让当前节点显示
}
* 页面加载完毕之后,
* 为id为panel下的class的值为head的h5元素用原始方式绑定mouseover事件,
* 让当前节点的下一个兄弟节点显示
* 为id为panel下的class的值为head的h5元素用原始方式绑定mouseout事件,
* 让当前节点的下一个兄弟节点隐藏
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
});*/
JQuery支持链式操作
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
});
* 等待页面加载完毕之后,
* 为id为panel下的class值为head的h5元素用简写形式绑定一个mouseover事件,让当前节点的下一个兄弟节点显示
* 为id为panel下的class值为head的h5元素用简写形式绑定一个mouseout事件,让当前节点的下一个兄弟节点隐藏
用简写形式为节点绑定事件
$("#panel h5.head").mouseover(function(){
$(this).addClass("highlight");
$(this).next().show();
}).mouseout(function(){
$(this).removeClass("highlight");
$(this).next().hide();
})
合成事件
* 为元素"h5.head"绑定hover事件,
* 分别让当前节点的兄弟显示和隐藏
* hover事件是模拟了页面上的鼠标悬停和鼠标移开事件
$("h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
* 为元素"h5.head"绑定toggle事件,
* 分别让当前元素的下一个兄弟节点显示和隐藏
* toggle模拟了鼠标的连续点击事件
$("h5.head").toggle(function(){
alert("1111");
},function(){
alert("22222");
},function(){
alert("3333");
});
$("h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
* 为元素绑定click事件,让当前节点下一个兄弟节点切换显示$dm.next().toggle();
* 2种方式实现 面试:toggle的2种用法分别代表什么?
$("h5.head").click(function(){
//如果将toggle当做一个函数来调用的话,可以切换当前节点的显示状态
$(this).next().toggle();
});
* 为元素绑定toggle事件.
* 1.当前节点增加样式.highlight 当前节点的下一个兄弟节点显示
* 2.为当前节点移除样式.highlight,当前节点的下一个兄弟节点隐藏
$(".head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
});
事件的简写绑定
基本的合成事件:hover toggle
toggle的2种用法
面试: window.onload和Jquery中的$(document).ready();区别?
Jquery完善的事件处理机制是什么?
四、Juery动画
五、JQuery之Ajax操作
页面加载完毕为 #send绑定点击事件 $("#resText").load("test.html");
$(function(){
$("#send").click(function(){
//加载服务端的test.html页面,将加载到的页面中的信息填充到id为resText的区域中
$("#resText").load("test.html");
});
});
页面加载完为#send绑定点击事件
$("#resText").load("test.html .para",function(resonpseText,textStatus,XMLHttpRequest){
* this代表的值,回调函数3个值的含义
* });;
$(function(){
$("#send").click(function(){
//加载服务端的test.html页面,将加载到的页面中的信息填充到id为resText的区域中
//在显示test.html中的数据是,我们只显示class的值为para下的数据 $("#resText").load("test.html .para",function(responseText,textStatus,XMLHttpRequest){
//alert("TTTTTT");
//回调函数中第一个变量的代表的是响应到客户端的所有内容
//alert(responseText);
//代表响应状态
//alert(textStatus);
//核心对象
//alert(XMLHttpRequest);
});
});
我们通过Ajax和服务端交互数据一般有3种情况,
1.当交互的数据量很小,可以用字符串的方式来进行交互
2.数据量稍微多点,数据有明显的格式,例如从Server向Client通过Ajax返回一个学生的信息
学号,姓名,性别,年龄,电话等. 此时我们可用JSON格式的字符串来进行传递
Var str=
{"stuNum":"001","stuName":"tom","stuSex":"female","stuAge":18,"stuPhone":"123456"}
var dt=eval("("+str+")");
3.数据量比较大,同时数据的格式比较复杂.例如,从Server-->Client传递一大堆的学生,
用XML数据来进行传递
字符串:
$(function(){
$("#send").click(function(){
$.post();--->$.post("");--->$.post("",{});-->$.post("",{},function(a,b,c){}
$.post("demo1.jsp",{"username":"tom","content":"123"},function(dt){
$("#resText").html(dt);
});
$.post("demo1.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){
$("#resText").html(dt);
});
});
});
Xml:
xml格式的数据:数据要求很严格:第一个行必须是指定的内容
$(function(){
$("#send").click(function(){
$.post("demo2.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){
//alert(dt);
var um=$(dt).find("comments comment").attr("username");
var up=$(dt).find("comments content").text();
$("#resText").html(um+up);
});
});
});
Json:
$(function(){
$("#send").click(function(){
$.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){
//alert(dt);
//var dd=eval("("+dt+")");
//$("#resText").html(dd.username+dd.content);
//PS:有的时候虽然我们明确说明返回来的是JSON格式的字符串.但是在执行alert(dt)的时候看到的不是对象,意味着没有正确转换为JSON对象,我们只需要手动转换一下即可.
var dd=eval("("+dt+")");
$("#resText").html(dt.username+" "+dt.content);
},"json");
});
});
$(function(){ * $.ajax({url:‘‘,data:{},type:‘‘,dataType:‘json‘,success:function(dt){},error:function(){}});
* $.ajax是JQuery对ajax最底层的一个包装,之前的load和post,get都可以用.ajax方法来实现
$("#send").click(function(){
$.ajax({
url:"demo.jsp",
data:{"username":$("#username").val(),"content":$("#content").val()},
type:"post",
dateType:"json",
success:function(dt){
//alert(dt);
var dd=eval("("+dt+")");
$("#resText").html(dd.username+""+dd.content);
},
error:function(){}
});
});
})
六、JQuery插件开发
JQuery的方法有2种,一种是类级别的,一种是对象级别的
类级别的方法: $.post(); $.get();
对象级别的方法: $("#id").html(); $(".aa").css("background","red");
那么对应的插件开发也有2种,分别为类级别的插件开发和对象级别的插件开发.
如果在开发中你遇到了百年不遇的问题,需要你自己实现插件,参考文档:JQuery插件开发
面试:
你用过JQuery吗?
必须的了.几乎90%的项目中都用到了.
那么你用过哪些JQuery插件呢?
jquery.validate.js jquery.zTree.js
jquery.date_input.js jquery.jUploader.js
jquery.zoom.js
EasyUI中的各种小插件
(function($){
//扩展JQuery对象级别的方法
$.fn.max=function(a,b){
if(a>b){
return a;
}else{
return b;
}
}
$.fn.notice=function(arg){
alert("notice:"+arg);
}
})(jQuery);
七、JQuery常用API拓展
Trim:
var str=" abc ";
alert("@"+str+"@");
var str2=$.trim(str);
alert("@"+str2+"@");
var arr=[100,200,300];
Each:
//JQuery为我们提供的非常方便的遍历数组和节点的方法
$.each(arr,function(index,obj){
alert(index+" "+obj);
});
ParseJson:
$(function(){
$("button").click(function(){
$.post("test.jsp",{},function(dt){
//用JQuery的方式转换JSON字符串,必须保证JSON字符串的格式是
//标准的JSON格式的字符串,所有的键都要用引号括起来
var dd=$.parseJSON(dt);
alert(dd.result+dd.msg);
});
});
});
First:
$(function(){
//$("ul li:eq(0)");
alert($("li").first().text());
alert($("li").last().text());
});
$.trim(); $.each() $.parseJSON();
$.find(); $.children();
$dm.first(); $dm.last(); $dm.slice(start,end);
alert($.inArray(300,arr));
var lis=$("li").toArray();
八、插件的使用
1.页面加载完毕
* 2.获取#commentForm,调用其validate方法,传递入一个对象
* 3.validate函数内的对象内放置4个键值对,
* 键的名字分别为rules,messages,errorElement和success
* rules和messages对应的值均为一个对象
* errorElement对应的为一个字符串"em" errorElement:‘em‘,代表出错时提示的标签,
* 可以更换为其他标签,但是对应的样式也必须修改
* success对应的为一个函数
* success: function(label) {
*//label指向上面那个错误提示信息标签em
*label.text(" ")//清空错误提示消息
*.addClass("success");//加上自定义的success类
*}
* 4.rules对应的值对象的内部也是多个键值对
* username:{required: true,minlength: 2},
*email:{required: true,email: true},
*url:"url",
*comment: "required"
* 5.messages对应的值对象内部也为多个键值对
* eg:
* username: {required: ‘请输入姓名‘,minlength: ‘请至少输入两个字符‘},
*email:{required: ‘请输入电子邮件‘,email: ‘请检查电子邮件的格式‘},
*url: ‘请检查网址的格式‘,
*comment: ‘请输入您的评论‘
*
* 这个版本为validate插件最终的版本,实现了内容和行为分离,自定义规则的实现
*
*/
$(function(){
$("#commentForm").validate({
rules:{
username:{required: true,minlength: 2},
email:{required: true,email: true},
url:"url",
comment: "required"},
messages:{
username: {required: ‘请输入姓名‘,minlength: ‘请至少输入两个字符‘},
email:{required: ‘请输入电子邮件‘,email: ‘请检查电子邮件的格式‘},
url: ‘请检查网址的格式‘,
comment: ‘请输入您的评论‘
},
errorElement:"em",
success:function(label){
//清空错误提示消息
label.text(" ")
.addClass("success");//加上自定义的success类
}
});
});
标签：1.5 another 错误 contains data 资源 UI enable val
原文地址：http://www.cnblogs.com/duan2/p/7899928.html
