JQuery

Posted on | In

一个JavaScript框架

JQuery快速入门

  1. 下载JQuery
  2. 在head标签内导入JQuery的JS文件(min.js)
  3. 在script标签内使用JQuery

    JQuery对象与JS对象的区别与转换

  • 区别
    1. 方法不通用
    2. JQuery的操作更加方便
  • 相互转换
    1. JS->JQ
1
$(JS对象)
2. JQ->JS
1
JQ对象[索引]或JQ对象.get(索引)

JQuery对象绑定事件

1
2
3
$("#id").click(function()
{}
)

JQuery入口函数

入口函数相当于JS中的window.onload(),等页面加载完毕后再执行

1
2
3
4
5
$(function()
{
    
}
)

window.onload()与入口函数的区别

window.onload()只能定义一次,入口函数可多个定义

选择器

基本选择器

  1. id选择器
    #后跟所选id

    1
    $("#id")

  2. class选择器
    .后跟所选class

1
$(".class")
  1. 多种(重)选择器
    多个选择条件共同筛选,条件之间用逗号隔开
1
$("选择器1,选择器2")
  1. 层级选择器
    选择某元素下的元素
1
2
3
4
$("A B")
选择A下的所有B类元素
$("A>B")
选择A下的所有B元素,但仅包括子元素
  1. 属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("标签名[属性名]")
选中拥有指定属性的标签
$("标签名[属性名='X']")
选中拥有指定属性,切属性为X的标签
$("标签名[属性名!='X']")
选中拥有指定属性且属性不等于X的标签
$("标签名[属性名^='X']")
选中拥有指定属性,且属性以X开始的标签
$("标签名[属性名$='X']")
选中拥有指定属性,且属性以X结束的标签
$("标签名[属性名*='X']")
选中拥有指定属性,且属性中包含X的标签
$("标签名[ID]title*='X']")
选中具有指定的ID属性且title属性中包含X的标签
  1. 过滤选择器
1
2
3
4
5
6
$("标签名:frist")
选中指定标签的第一个
$("标签名:last")
选中指定标签的最后一个
$("标签名:not(.one)")
选中标签名不为one的标签
1
2
3
4
5
6
7
8
9
10
11
偶数选择器
	* 语法： :even 偶数，从 0 开始计数
奇数选择器
	* 语法： :odd 奇数，从 0 开始计数
等于索引选择器
	* 语法： :eq(index) 指定索引元素
大于索引选择器 
小于索引选择器 
	* 语法： :lt(index) 小于指定索引元素
标题选择器
	* 语法： :header 获得标题（h1~h6）元素，固定写法
  1. 表单过滤选择器
1
2
3
4
5
6
7
8
可用元素选择器 $(":disabled")
	* 语法： :enabled 获得可用元素
不可用元素选择器 
	* 语法： :disabled 获得不可用元素
选中选择器 
	* 语法： :checked 获得单选/复选框选中的元素
选中选择器 
	* 语法： :selected 获得下拉框选中的元素

DOM操作

  1. html() 获取/设置元素的标签体内容
  2. text() 获取/设置元素的标签体及内容
  3. val() 获取/设置元素的value属性值

    操作属性

  4. 通用属性操作
    • attr() 获取/设置元素的自定义属性
    • removeAttr() 删除元素的自定义属性
    • prop() 获取/设置元素的固有属性
    • removeProp() 删除元素的固有属性

attr()与prop()的区别:建议使用attr()操作自定义属性,prop()操作固有属性,因为某些固有属性用attr()无法操作

  1. 对class属性的操作

    • addClass():添加class属性值
    • removeClass():删除class属性值
    • toggleClass():切换class属性
    • css():
      1
      2
      3
      toggleClass("one"): 
      判断如果元素对象上存在class="one"，则将属性值one删除掉。 
      如果元素对象上不存在class="one"，则添加

  2. CRUD操作

1
2
3
4
5
6
7
8
9
10
* append()          父元素将子元素追加到内部,且在末尾
* prepend()         父元素将子元素追加到内部,且在开头
* appendTo()        子元素被追加到父元素内部,且在末尾
* prependTo()       子元素被追加到父元素内部,且在开头
* after()           父元素将子元素追加到末尾
* before()          父元素将子元素追加到开头
* insertAfter()     子元素被追加到父元素末尾
* insertBefore()    子元素被追加到父元素开始
* remove()          移除元素
* empty()           移除元素的所有后代元素,但保留当前对象与属性节点

JQuery高级

JQuery动画

三种显示/隐藏的方式

  1. 默认的显示/隐藏
    • show([speed,[easing],[Fn]])
    • hide([speed,[easing],[Fn]])
    • toggle([speed,[easing],[Fn]])
  2. 滑动显示/隐藏
    • sildeDown([speed,[easing],[Fn]])
    • slideUp([speed,[easing],[Fn]])
    • sildeToggle([speed,[easing],[Fn]])
  3. 淡入淡出显示/隐藏
    • fadeIn([speed,[easing],[Fn]])
    • fadeOut([speed,[easing],[Fn]])
    • fadeToggle
1
2
3
4
([speed,[easing],[Fn]])三个参数
speed表示动画速度,有slow,fast或精准的毫秒值
easing表示动画效果,默认为swing
Fn表示动画执行完毕后运行的函数,仅执行一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#anniu").click(function () {
                $("#picc").fadeToggle("slow");
            })

        })
    </script>
</head>
<body>
<input id="anniu" type="button" value="点击">
<img id="picc" src="WEB-INF/pic.jpg">
</body>
</html>