jquery的基础语法：$(selector).action()
1.寻找元素
①选择器
（1）基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
（2）层级选择器
$(".outer div") .outer下的所有div标签
$(".outer>div") .outer下的儿子级div标签
$(".outer+div") .outer向下的紧挨着的兄弟div标签
$(".outer~div") .outer向下的兄弟div标签
（3）基本筛选器
$("li:first") 所有li标签之中的第一个标签
$("li:last") 所有li标签之中的最后一个标签
$("li:eq(2)") 所有li标签之中的索引2的标签（也就是第三个标签）
$("li:even") 所有li标签之中的第基数个标签
$("li:odd") 所有li标签之中的第偶数个标签
$("li:gt(3)") 所有li标签之中索引3和之后的所有标签
$("li:lt(3)") 所有li标签之中索引3之前的所有标签
（4）属性筛选器
$("[id]")
$("[id='div1']")
$("[alex='sb'][id]")
$("[alex='sb'][id='ssb']")
（5）表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
②筛选器
（1）过滤筛选器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test") 这个标签是否有test属性，返回的是布尔值
（2）查找筛选器
$("div").children(".test") 只找儿子级的
$("div").find(".test") 找所有子孙
---------------------------------------------------------------
$(".test").next() .test的下一个
$(".test").nextAll() .test之后的所有
$(".test").nextUntil("#end") .test和向下方向的#end之间的所有
---------------------------------------------------------------
$("div").prev() .test的上一个
$("div").prevAll() .test之前的所有
$("div").prevUntil("#end") .test和向上方向的#end之间的所有
----------------------------------------------------------------
$(".test").parent() .test的第一层父亲
$(".test").parents() .test的最外层父亲
$(".test").parentUntil("#end") .test的主宗当中#end的儿子
----------------------------------------------------------------
$(".test").siblings() .test的所有兄弟标签
2.操作元素(属性，循环遍历，文档处理，css)
①属性操作
--------------------------属性
①attr，不建议用来操作标签固有属性，例如checked="checked" $("").attr("属性名"); 获取属性值
$("").attr("属性名","属性值"); 重新设置属性值，属性值可以写多个，"aa bb" $("").removeAttr(); 会直接将所有匹配到的元素的该属性删除掉，包括属性名和属性值
②prop，用来处理标签固有属性 $("").prop("属性名"); 获取属性值，checked这种属性和属性值一样的返回true，false $("").prop("属性名","属性值") 重新设置属性值，属性值可以写多个，"aa bb"，如果属性是checked这种，属性值可以写成true/false，也可以写成checked/空
$("").removeProp(); 仅仅会移除掉所有匹配到的元素的固有属性的值，（不能移除新增属性），属性名会保留。 --------------------------CSS类 $("").addClass(class|fn) 添加标签里class的一个或多个值（值已有的话不添加）|用函数来添加class值 $("").removeClass([class|fn]) 删除标签里class的一个或多个值|用函数来删除class值 --------------------------HTML代码/文本/值 $("").html() 获取所有html文档，里面具体的标签也会获取
$("").html([val|fn]) 修改里面标签里面的所有，重新设置内容里面的具体标签会生效 $("").text() 只获取所有文本内容，里面具体的标签不会获取
$("").text([val|fn]) 修改里面标签里面的所有，重新设置内容里面的具体标签不会生效 $("").val() 取标签里的value属性的属性值，value属性只能是标签的固有属性
$("").val("123") val属性值改成123 --------------------------- $("").css("color","red")
$("").css({"color":"red","background-color":"})
②jQuery循环遍历
//方式一
li=[10,20,30,40]
$.each(li,function(i,x){ i是索引，x是值
console.log(i,x) })
//方式二 <p>111</p> <p>222</p> <p>333</p> <p>444</p>
<div>555</div> $("p,div ").each(function(){ #从111到444依次拿标签
console.log($(this).html())
console.log($(this)[0] #跟上面一样的效果 })
③文档处理
//创建一个标签对象 $("<p>") //内部插入（父子关系） 新插入的排在最后面 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); 父亲里面插入儿子 $("").appendTo(content) ----->$(对象).appendTo("div"); 儿子插入到父亲里
新插入的排在最前面 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); 父亲里面插入儿子 $("").prependTo(content) ----->$(对象).prependTo("#foo"); 儿子插入到父亲里 //外部插入（兄弟关系） $("").after(content|fn) ----->$("p").after("<b>Hello</b>");a的下面放入b $("").before(content|fn) ----->$("p").before("<b>Hello</b>");a的上面放入b $("").insertAfter(content) ----->$(对象).insertAfter("#foo");把b放入a的下面 $("").insertBefore(content) ----->$(对象).insertBefore("#foo");把b放入a的上面 //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");被替换着***替换着 //删除与清空 $("").empty() 把盒子里的内容清空，盒子不会删除 $("").remove([expr]) 把盒子和内部里的内容都删除，盒子被删除 //复制 $("").clone([Even[,deepEven]])
具体应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
④CSS操作
CSS $("").css(name|pro|[,val|fn]) 位置
相对于整个浏览器窗口的偏移量 $("").offset().top/left
相对于已经定位的第一个（最内层）父标签的偏移量 $("").position().top/left
滚动条 $("").scrollTop([val]) $("").scrollLeft([val])
window.onscroll,监听滑轮
$(window).scrollTop()
$(window).scrollTop(数字) 尺寸
content $("").height([val|fn]) $("").width([val|fn])
content+padding $("").innerHeight() $("").innerWidth()
content+padding+border $("").outerHeight([soptions]) $("").outerWidth([options])
content+padding+border+margin
$("").outerHeight(true)
实例返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current)
if (current>100){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
}
function returnTop(){
// $(".div1").scrollTop(0);
$(window).scrollTop(0)
}
</script>
<style>
body{
margin: 0px;
}
.returnTop{
height: 60px;
width: 100px;
background-color: darkgray;
position: fixed;
right: 0;
bottom: 0;
color: greenyellow;
line-height: 60px;
text-align: center;
}
.div1{
background-color: orchid;
font-size: 5px;
overflow: auto;
width: 500px;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 300px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1 div">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>
3.事件
①事件绑定
基本格式（简写）
$("button").click(function () {
var $e=$("<p>").html("123");
$("body").prepend($e)
})
完整形式
绑定事件 $("ul li").bind("click",function(){ alert(777) } 解除绑定 $("ul li").unbind("click")
②事件委托
$("ul").on("click","li",function(){
alert(999);
});
把click事件委托给ul，ul再把click事件给li（ul里原本有的li和以后新增加的li）
4.动画效果
①显示隐藏
$("div").show()
$("div").hide()
$("div").show(1000)
$("div").hide(1000)
$("div").toggle(),切换（如果当前状态是隐藏，切换函数就是显示，如果当前状态是显示，切换函数就是隐藏）
$("div").toggle(1000)
②滑动（上下方向）
$("#content").slideDown(1000);
$("#content").slideUp(1000);
$("#content").slideToggle(1000);
③显示隐藏（淡入淡出）
$("#id1").fadeIn(1000) $("#id1").fadeOut(1000)
$("#id1").fadeToggle(1000)
$("#id1").fadeTo(1000,0.4)，0.4是变最淡的时候的参数
④回调函数
在一个动作结束之后再执行的动作叫回调函数
原本是这样： $("div").hide(1000) 添加回调函数之后： $("div").hide(1000,function(){ alert(123) })
扫一扫
9783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
