jQuery
Posted 慕沁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
jQuery是一个一个优秀的javascript框架
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() //所有兄弟标签
-
- 过滤筛选器
-
tab切换<!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对象
- 用jQuery选择器查出来的就是jQuery对象
- 只能使用jQuery方法
两者之间转换：
- $(".c1")[0] --> DOM对象
- $（DOM对象）----->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属性值都可以设置
- 图片变小（漏气）
五、事件绑定
- $("").on("click", function(){})
- $("").on("click",".btn-warning",function(){}) jQuery的事件委派
$("button").on("click",function () {
$(window).scrollTop(0);// 给一个滚动条位置
});
$(window).scroll(function () {
//滚动的时候做的操作
if ($(window).scrollTop()>100){
$("button").removeClass("hide")
}
else{
$("button").addClass("hide")
}
});
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段