标签：spl 添加 src 透明 ndt 包装 until toggle 3.2
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
一、导入方式
<script src="jquery-3.2.1.js"></script>
二、选择标签
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟")
$("li:first") $("li:last") $("li:eq(2)") //索引为2$("li:gt(2)") //索引大于2 $("li:lt(2)") //索引小于2 $("li:even") //偶数$("li:odd") //奇数 $("li:focus") //焦点$("li:not（‘‘）") //非 $(‘[id="div1"]‘) $("li").eq(2) $("li").first() $("ul li").hasclass("test") $("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings() //所有兄弟标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <script> function tab(self){ var index=$(self).attr("xxx"); $("#"+index).removeClass("hide").siblings().addClass("hide"); $(self).addClass("current").siblings().removeClass("current"); } </script> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; /*border: 1px solid red;*/ line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: darkgray; color: yellow; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li xxx="c1" class="current" onclick="tab(this);">菜单一</li> <li xxx="c2" onclick="tab(this);">菜单二</li> <li xxx="c3" onclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </body> </html>
三、jQuery对象
两者之间转换：
四、对象 属性
--------------------------属性 $("").attr(属性名|属性值); //一个参数是获取属性的值，两个参数是设置属性值 $("").removeAttr(属性名); $("").prop(属性名|属性值); //只能获取固有属性 $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red")
-------------------循环-------------
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})
------------CSS类-------------------
- addClass 添加类属性
- removeClass 移除类属性
- toggleClass 开关|切换（有就移除，没有就添加）
//创建一个标签对象 $("<p>") //内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到B的前面 //外部插入 A.after(B) 吧B添加到A的后面 A.insertAfter(B) 吧A添加到B的后面 A.before(B) 吧B添加到A的前面 A.insertBefore(B) 吧A添加到B的前面 //替换 A.replaceWith(B) --> B替换A A.replaceAll(B) --> A替换B //删除 $("").empty() 内部清空 $("").remove([expr]) 整体都删除 //复制 $("").clone([Even[,deepEven]])
css操作
CSS
$("").css(“name”)
$("").css("name","sf")
位置
$("").offset([coordinates]) //获取相对窗口的位置
$("").position() //获取相对已经定位的父标签的位置
$("").scrollTop([val]) //滚动条位置
$("").scrollLeft([val])
尺寸
height([val|fn])
- 元素的高度
width([val|fn])
- 元素的宽度
innerHeight()
- 带padding的高度
innerWidth()
- 带padding的宽度
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
- 在innerHeight的基础上再加border的高度
动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
});
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 图片变小（漏气）
五、事件绑定
$("button").on("click",function () {
$(window).scrollTop(0);// 给一个滚动条位置
});
$(window).scroll(function () {
//滚动的时候做的操作
if ($(window).scrollTop()>100){
$("button").removeClass("hide")
}
else{
$("button").addClass("hide")
}
});
标签：spl 添加 src 透明 ndt 包装 until toggle 3.2
原文地址：https://www.cnblogs.com/ls-2018/p/8945051.html
