Java学习笔记（二十四）：JQuery

写在前面：

学习网站：https://www.w3school.com.cn/jquery/index.asp

$("选择器").方法()

$("选择器").事件( function(){} )

选择器

标签名     #id     .class

A,B     A B     A>B

A[属性名1][属性名2]     A[属性名='值']

!=     ^=         $=     *=

:header

A:first     last         even     odd     gt(n)     lt(n)     eq(n)    not(.className)

A:selected     checked         enable     disable

方法

html     text         val

attr     prop          removeAttr         removeProp

addClass     removeClass     toggleClass     css

appent     prepent          after     before     remove     empty

show     hide     toggle slideDown     slideUp         slideToggle fadeIn     fadeOut     fadeToggle 速度：slow     normal     fast     ms 切换效果：swing     linear

循环

jq.each( function(){} )

$.each(jq,function(){} )

for(i  of  jq){}

事件

jq.事件( function(){} )

jq.on( "事件", function(){} )

jq.off( ["事件"] )

jq.toggle(fun1,fun2...)

增强

$.fn.extend({  fun1:function(){},fun2:function(){} })

$.extend({...})

---

1. 基本介绍

JQuery：JS的框架；本质是一些封装了JS原生代码的文件

 

下载使用：

官网下载JQuery：https://jquery.com

新建文件：jquery-3.4.1.min.js  将页面内容复制到文件中保存

将文件放到项目的js文件夹下，在使用页面引入：<script src="js/jquery-3.4.1.min.js"></script>

 

JQuery对象与JS对象的转换

JS：document.getElementsByTagName("div")

JQuery：$("div")

本质区别：都可当作数组使用，遍历方式不同

转换：jq=$(js) 、js=jq[index] 或者 js=jq.get(index)

    var divJS = document.getElementsByTagName("div")
    var divJQ = $("div")

divJQ.html("jq");     //JQuery对数组内的所有元素进行操作
divJS[0].innerHTML="js"   //JS对数组内的一个元素进行操作

divJQ[0].innerHTML="jq0-->js"  //JQ取一个元素，即转为JS； 还可以 divJQ.get(0)
$(divJS).html("js-->jq")           //JS取$(),即转为JQ

2. 选择器

筛选具有相似特征的元素（标签）

$(" xxx ")  ：

---

标签、#id、.class

---

A,B   ：并列

A B   ：A下的所有B

A>B  ：A下的直接B

---

A[属性名]       A[属性名1][属性名2]

A[属性名='属性值']       != 不等于       ^= 以这个开始       $= 以这个结尾       *= 包含这个值

---

A:first  第一个           A:last  最后一个

A:not(.one)  class不是one的             

A:even 索引值为偶数的(0开始)            A:odd  索引值为奇数的

A:gt(3)  索引值大于3的           A:lt(3)  索引值小于3的             A:eq(3)  索引值等于3的

---

:header  所有标题

---

A:enabled  所有可用的       A:disabled  所有不可用的         A:checked  所有选中的      A:selected

---

 

3. DOM操作

内容的设置和获取：空参--获取；传值--设置

html() 标签体内容、text() 纯文本内容、val() value属性值

通用属性的设置和获取：一个参数(属性名)--获取；两个参数(属性名, 属性值)--设置

attr 自定义属性、prop 固有属性

removeAttr、removaProp

class属性的设置和获取：

addClass、removeClass、toggleClass 切换、css

切换：判断元素上是否有这个class，如果有就删掉，如果没有就加上

css：(名，值)--修改样式；(名)--获取这个样式的值

CRUD操作

append 内部末尾、prepend 内部开头：A.append(B) 将B添加到A的内部，并且在末尾

 （appendTo、prependTo ：A B颠倒）

after 后、before 前：A.affter(B) 将B添加到A的后边（兄弟关系）

 （insertAfter、insertBefore ：A B颠倒）

remove 删除 ：A.remove()

empty 清空子元素 ：但保留当前元素及其属性

$("div").css("height","100px")

4. JQuery动画

显示和隐藏元素

默认方式：show、hide、toggle

滑动：slideDown、slideUp、slideToggle

淡入淡出：fadeIn、fadeOut、fadeToggle

参数：（[速度，[切换效果]，[动画执行完后的函数，执行一次]]）

速度：slow、normal、fast、毫秒值

切换效果：swing 默认值 慢快慢、linear 匀速

$("div").slideToggle("slow","linear")

5. 遍历

jq对象.each(回调函数)

$.each(jq对象, [回调函数])

for(i of jq对象){ }

        $("div").each(function (index, element) {//参数：索引，每个元素对象
            element.innerHTML=index;
            if(index==0){
                return true;
            }
            element.innerHTML += index;
            /*
            return false; //相当于break
            return true;  //相当于continue
             */
        })

6. 事件绑定

JQ对象.事件名称([回调函数]) [.事件名称([回调函数])] ：不写回调函数执行事件的默认效果

JQ对象.on("事件名称", 回调函数)

JQ对象.off(["事件名称"])   ：解绑；不写事件名称，即解绑所有事件

JQ对象.toggle(回调函数1，回调函数2，...)  ：切换；第一次执行函数1，第二次执行函数2，循环

-----高版本(1.9之后)不支持toggle，需要导入Migrate插件恢复此功能

-----在JQuery的下载页面，往下拉，有Migrate的下载

 

    $("#jq").click(function () {
        $(this).val("jq")
    })

入口函数：

$(function(){}) ：可以定义多次

window.οnlοad=function(){} ：只能定义一次，第二次会覆盖第一次

事件举例：

click、dblclick、focus 焦点、mouseover 鼠标悬停

 

7. 插件：增强JQuery功能

实现方式：

$.fn.extend(object) ：增强 通过Jquery获取的对象 的功能

$.extend(object) ：增强 Jquery对象本身 的功能

    $.fn.extend({
        // "方法名称":function () {}
        al:function () {alert("al")},
        co:function () {confirm("co")},
    })
//方法使用
    $("#jq").co();