Dom2-testget
Dom2-testpost
Dom2-xmlfile
Dom2-json
Dom2-selecter
//alert("There are "+$(response).find("cd").size()+" CDs")
//document.getElementById('testState').getBoundingClientRect().top; 获取元素到浏览器顶端的距离
$(function(){ //相当于$(document).ready(function(){
$(".moreList").hover(function(){
var hideDiv=$(this).children("div").eq(0);
var offset=$(this).offset();
hideDiv.css({top:offset.top+10,left:offset.left+80});
hideDiv.show();
/* var hideDiv = $(this).get(0).getElementsByTagName("div")[0]; //jquery转换为dom对象
$(hideDiv).css({top:offset.top+10,left:offset.left+80}); //css的多元素
$(hideDiv).show();*/
},function(){
var hideDiv=$(this).children("div").eq(0);
hideDiv.hide();
});
});
for(var x = 2 ;x<11;x++){
(function(){
var x=i;
$("#img"+x).mouseover(function(){
$("#img"+x).attr("src", "/LogService/images/hover_"+(x-1)+".jpg");
});
$("#img"+x).mouseleave(function(){
$("#img"+x).attr("src", "/LogService/images/"+(x-1)+".jpg");
});
})();
} //闭包
Dom2-jquery Dom和Jquery转换
Dom2-selecter
$("#b3").click(function(){
$(".mini").css("background-color", "blue");
});
改变所有span和id为two的背景颜色 //用","分隔
$("#b4").click(function(){
$("span,#two").css("background-color", "yellow");
});
改变所有span中id为two的背景颜色
$("#b4").click(function(){
$("span[id=two]).css("background-color", "yellow");
});
$("input[type=text]").focus(function(){
alert("xxx")});//层次选择器 $("#b1").click(function(){
$("body div").css("background-color", "red");
}); //body下面所有div变化改变所有body中子div的背景色，只有子 ，子以后的后代元素不算（孙子等等）
$("#b1").click(function(){ $("body>div").css("background-color", "red"); }); //body下面所有div变化
//层次选择器
// 一、 改变所有td中所有<a>标签的字体
$("#b1").click(function(){
$("td a").css("background-color", "silver");
});
//二、 改变所有td中子<a>标签的字体，只有子 ，子以后的后代元素不算（孙子等等）
直接空格td a层次选择是选取td下所有a，包括后代，而td>a,只选取td子元素，（孙子，后代不算）！！！
table一般用table:eq(0) tr:even 因为td里面的文字也是子元素。
$("#b2").click(function(){
$("td>a").css("background-color", "silver");
});
//三、改变id为one的下一个td背景色
$("#b3").click(function(){
$("#one+td").css("background-color", "red");
});
//四、改变id为two的后面的所有兄弟div的背景色
$("#b4").click(function(){
$("#two~div").css("background-color", "red");
});
五：改变id为two所有兄弟div的背景色
$("#b4").click(function(){
$("#two).siblings("div").css("background-color", "red");
});
过滤选择器
//一、改变第一个div的背景色
$("#b1").click(function(){
$("div:first").css("background-color", "yellow");
});
//二、改变最后一个div的背景色
$("#b2").click(function(){
$("div:last").css("background-color", "red");
});
//三、改变class不为one的所有div的背景色
$("#b3").click(function(){
$("div:not(.one)").css("background-color", "yellow");
});
//四、改变索引值为偶数的div的背景色
$("#b4").click(function(){
$("div:even").css("background-color", "yellow");
});
//五、改变索引值为基数的div的背景色
$("#b5").click(function(){
$("div:odd").css("background-color", "yellow");
});
//六、改变索引值大于3的div的背景色
$("#b6").click(function(){
$("div:gt(3)").css("background-color", "yellow");
});
//七、改变索引值等于3的div的背景色
$("#b7").click(function(){
$("div:eq(3)").css("background-color", "yellow");
});
//八、改变索引值小于3的div的背景色
$("#b8").click(function(){
$("div:lt(3)").css("background-color", "yellow");
});
//九、改变所有标题元素的背景色，专门用来获得h1，h2，h3这样的标头元素
$("#b9").click(function(){
$(":header").css("background-color", "yellow");
});
//十、 <div id="mover">动画</div> 增加动画效果
$("#b10").click(function(){
$(":animated").css("background-color", "yellow");
});
function ca(){
$("#mover").slideToggle(800, ca);
}
ca();
内容过滤选择器：
//一、改变含有文本di的背景色
$("#b1").click(function(){
$("div:contains('di')").css("background-color", "green");
});
//二、改变没有文本的背景色
$("#b2").click(function(){
$("td:empty").css("background-color", "green");
});
//三、改变含有<p>的div元素的背景色
$("#b3").click(function(){
$("div:has(p)").css("background-color", "yellow");
});
//三、改变含有class为.min的div元素的背景色
$("#b3").click(function(){
$("div:has(.min)").css("background-color", "yellow");
$("div[class=min]").css("background-color", "yellow");
});
//四、改变含有子元素或者文本的div,这里的parent可不是.parent哦！！！
这是对本身div的过滤
$("#b4").click(function(){
$("div:parent").css("background-color", "yellow");
});
//五、改变不含有文本di的div元素的背景色
$("#b5").click(function(){
$("div:not(:contains(di))").css("background-color", "yellow");
});
可见，不可见选择：可见度过滤选择器
//一、改变所有可见的div的背景色
$("#b1").click(function(){
$("div:visible").css("background-color", "yellow");
$("div").show();
});
//二、选取所有不可见div的元素并将他们显示出来
$("#b2").click(function(){
$("div:hidden").show();
});
//三、选取所有的文本影藏,输出值
$("#b3").click(function(){
var $inputHid=$("input:hidden");
/**
*
* @param {Object} 每次遍历的索引
* @param {Object} domEle
*/
$inputHid.each(function(index,domEle){
//jquery中的方法
//alert($(this).val()); //jquery去对象一定要加$ ,以前犯过这个错，搞了很久！！！
//alert(index);
//alert(domEle.value)
alert($(domEle).val());
});
});
集合循环遍历（form）
第一种方法：
$("p").each.function(index,domEle){
$(domEle).click(function(){
alert("xxxxxxxxxxx");
})
第二种方法：
$("#b1").click(function(){
$("input[type='text']:enabled").val("xxxxxxxxxxxx");
})
//二、取出不可用的input
$("#b2").click(function(){
$("input[type='text']:disabled").val("xxxxxxxxxxxx");
})
//三、利用jquery的length属性获取多选框选中的个数
$("#b3").click(function(){
var len=$("input[type='checkbox']:checked").length;
alert(len);
})
//四、输出被选中的多选框的值
$("#b4").click(function(){
$.each($("input[type='checkbox']:checked"),function(index, domEle){
alert($(domEle).val());
});
})
//五、用jquery的text方法获取下拉选的结果
$("#b5").click(function(){
var val=$("select option:selected").text();
alert(val);
})
属性过滤选择器：
//一、改变含有属性title的div
$("#b1").click(function(){
$("div[title]").css("background-color", "yellow");
});
//二、改变不含属性title的div
$("#b2").click(function(){
$("div:not([title])").css("background-color", "yellow");
});
//三、属性title等于test的div元素
$("#b3").click(function(){
$("div[title='test']").css("background-color", "yellow");
});
//四、属性title不等于test的div元素 不含title或者含有title但不等于test的
$("#b4").click(function(){
$("div[title!='test']").css("background-color", "yellow");
});
//五、含有title但是title!=test
$("#b5").click(function(){
$("div[title][title!=test]").css("background-color", "yellow");
});
//六、属性title是以te开头的div元素
$("#b6").click(function(){
$("div[title^=te]").css("background-color", "yellow");
});
//七、属性title是以est结尾的div元素
$("#b7").click(function(){
$("div[title$=est]").css("background-color", "yellow");
});
//八、属性title包含es的div元素
$("#b8").click(function(){
$("div[title*=es]").css("background-color", "yellow");
});
//九、选取有属性id的div元素 然后在结果中选取属性title值含有es的div元素
$("#b9").click(function(){
$("div[id][title*='es']").css("background-color", "yellow");
});
子元素过滤选择器：
//一、每个class为one的div父元素下的第2个子元素
$("#b1").click(function(){
//层次选择器，使用子元素过滤选择器的时候，在父元素和子元素之间加空格或者>
//$("div[class='one']>:nth-child(2)").css("background-color", "yellow");
$("div[class='one'] :nth-child(2)").css("background-color", "yellow");
});
//二、每个class为one的div父元素下的第1个子元素
/*法一
$("#b2").click(function(){
$("div[class='one'] :nth-child(1)").css("background-color", "yellow");
//$("div[class='one']>:first-child(2)").css("background-color", "yellow");
// $("div[class='one'] :first-child(1)").css("background-color", "yellow");
});
*/
//法二
$("#b2").click(function(){
$("div[class='one'] :first-child").css("background-color", "yellow");
});
//三、每个class为one的div父元素下的最后一个子元素
$("#b3").click(function(){
$("div[class='one'] :last-child").css("background-color", "yellow");
});
//四、找到class为one的且只有一个子元素的div
$("#b4").click(function(){
$("div[class='one'] :only-child").css("background-color", "yellow");
});
表单内可用和不可用：
查找节点：
Dom2-dom：jquery添加节点
通过class改变属性：
//使用attr来改变背景色
$("#b1").click(function(){
$("#one").attr("class", "mini");
})
//追加样式
$("#b2").click(function(){
$("#one").addClass("mini");
})
//移除样式
$("#b3").click(function(){
$("#one").removeClass("mini");
})
//切换样式
$("#b4").click(function(){
$("#one").toggleClass("mini");
})
//判断是否含有某个样式
$("#b5").click(function(){
alert($("#one").hasClass("mini"));
})
jquery-ajax读xml 见Dom3
for(var i = 2 ;i<11;i++){
(function(){
var x=i;
$("#img"+x).bind("click",function(){
for(var j =2 ;j<11;j++){
$("#img"+j).attr("src", "/LogService/images/"+(j-1)+".jpg");
}
$("#img"+x).attr("src", "/LogService/images/hover_"+(x-1)+".jpg");
$(this).unbind("mouseout");
});
$("#img"+x).bind("mouseover",function(){
$("#img"+x).attr("src", "/LogService/images/hover_"+(x-1)+".jpg");
});
$("#img"+x).bind("mouseout",function(){
$("#img"+x).attr("src", "/LogService/images/"+(x-1)+".jpg");
});
})();
//对查询条件颜色的定义
$(".selectTbale input,.selectTbale select").css("color","5A5A5A");
}
$(".imgMiddle").click(function(){
$(".imgMiddle").each(function(innerIndex){
$(this).removeClass("selected");
$(this).attr("src","/LogService/images/"+(innerIndex+1)+".jpg");
});
var index=$(this).parent().index();
$(this).addClass("selected");
$(this).attr("src","/LogService/images/hover_"+index+".jpg");
});
$(".imgMiddle").hover(function(){
if(!$(this).hasClass("selected")){
var index=$(this).parent().index();
$(this).attr("src","/LogService/images/hover_"+index+".jpg");
}
},function(){
if(!$(this).hasClass("selected")){
var index=$(this).parent().index();
$(this).attr("src","/LogService/images/"+index+".jpg");
}
});
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
