JQuery
1.$用于声明jquery对象
语法：$(selector)
2.功能函数的前缀 例如：
str=$.trim(str);
3.创建dom元素
(1)append appendTo追加到元素内容之后
$(".block").append(str);或者str.appendTo($(".block"));
(2)prepend prependTo 追加到元素内容之前
$(".block").prepend(str);或者str.prependTo($(".block"));
(3)用函数的返回值追加
$(".block").append(function(index,html){
return str;//直接返回，只给最后一个追加
if(index==0){
return str;//给第一个追加
}
})；
4.外部插入节点
(1) $(".b1").after(str);*///在b1的div后面插入节点
str.insertAfter($(".b1"));
(2)$(".b1").before(str);//在b1之前插入节点
str.insertBefore($(".b1"));
选择器
//复合选择器语法
$("selector1,selector2,selector3")
//祖先后代选择器
语法$("ancestor descendant")
如：想获取ul下面的全部li :$("ul li")
1.父子选择器：
$("parsent>child")
2.相邻选择器
$("prev+next")
如果要获取div后面的p：$("div+p")
<div>sjscbs</div>
<p>jscn</p>
3. 兄弟选择器
$("prev~siblings")
4.简单过滤选择器
$("ul>li:first").css("border","4px solid black");//获取第一个li元素
$("ul>li:last").css("border","1px solid yellow");//获取最后一个li元素
$("ul>li").first().css("border","1px solid red");//获取第一个li元素
$("ul>li").last().css("border","2px solid pink");//获取最后一个li元素
$("ul>li:not(.li_list)").css("border","2px solid black");//获取除了这个元素的值
$("ul>li:even").css("color","red");//获取奇数元素
$("ul>li:odd").css("color","blue")//获取偶数元素
$("ul>li:eq(1)").css("border","2px solid pink");//获取指定索引值的元素
$("ul>li:gt(2)").css("border","2px solid yellow");//获取大于索引位的元素
$("ul>li:lt(2)").css("border","3px solid blue");//获取所有小于索引值的元素
5.内容过滤选择器
$("ul>li:contains(1)").css("color","red");//获取包含给定的元素内容
$("ul>li:empty").css("border","2px solid yellow");//获取子元素为空的元素
$("ul>li:has('p')").css("color","red");//获取含有p元素的li
$("div:parent").css("color","yellow");//获取含有子元素或者文本的内容
6.可见性过滤选择器
$("div:hidden").css("display","block");//获取隐藏元素
$("div:visible").css("color","red");
7.属性过滤选择器
$("div[class]").css("color","red");
$("div[class=b2]").css("color","green");
$("li[class!=li_list]").css("color","blue");//获取不给定属性的li值
$("li[class^=l]").css("color","red");//获取属性名称以l开头的元素
$("li[class$=t]").css("color","red");*/ //获取属性名以t结束的元素
$("li[class*='1']").css("color","yellow");//获取属性名中含1的元素
$("div[class][title]").css("color","pink");//获取存在多个属性的元素
8.子元素过滤选择器属性
$("ul>li:nth-child(3)").css("color","purple")//获取父元素特定位置的子元素，
按索引位取值 索引从1号位开始
$("ul>li:first-child").css("color","red");//获取父元素下的第一个子元素
$("ul>li:last-child").css("color","blue")//获取父元素下的最后一个子元素
$("div>p:only-child").css("color","silver");
9.表单过滤选择器
(1) $(" :enabled") //获取所有被选中的元素
(2) $(" :disabled")//获取所有不可用的元素
(3) $(":checked")//查找所有选中的复选框元素
(4) $(":selected")//获取所有的option元素
10.表单选择器
(1)$(":input")//选择器用于选取表单元素
(2)$(":text")//选取类型为text的所有<input>元素
(3)$(":password")//选取类型为password的所有<input>元素
(4)$(":radio")//选取类型的radio的<input>元素
(5)$(":checkbox")//选取类型为checkbox的<input>元素
11.对页面的内容进行操作
$("#block").text()//获取文本内容
$("#test").html()//获取html内容
$("#test").remove();//移除被选元素
12.克隆例子
clone()主要用于生成被选元素的副本，包含子节点，文本和属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
/* clone 中参数为true：深度克隆 false:表面克隆*/
$(".btn1").click(function(){
$(".clone").clone(true).prependTo($(".block"));
})
$(".clone").click(function(){
alert(1);
})
$(".rep").click(function(){
//替换元素节点 replaceWith replaceAll
/* $(".btn2").replaceWith("<input type='button'value='已经替换'>")*/
/* $("<input type='button' value='已经替换'>") .replaceAll( $(".btn2"))*/
});
//包裹元素
$(".wrop").click(function () {
//将每一个.block名称的元素用div 分别包起来
/* $(".block").wrap("<div></div>")*/
//将所有.block名称的元素用一个div 包起来
/* $(".block").wrapAll("<div></div>")*/
//将block中的内容用div包起来
/* $(".block").wrapInner("<div></div>");*/
});
})
</script>
<style>
.block{
width: 600px;
height: 100px;
border: 1px solid silver;
}
</style>
</head>
<body>
<button class="clone">克隆</button>
<button class="rep">替换文本</button>
<button class="btn1">按钮</button>
<button class="btn2">按钮</button>
<button class="wrop">包裹</button>
<div class="block">dscsvcev</div>
<div class="block">dscsvcev</div>
<div class="block">dscsvcev</div>
</body>
</html>
326
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
