目 录CONTENT

文章目录

jQuery基础

Administrator
2020-07-24 / 0 评论 / 1 点赞 / 12433 阅读 / 36531 字

jQuery基础

  • 宗旨:写得更少,做得更多
  • 主要的功能 :
    1. 优化HTML文档操作(增,删,改,查,class样式处理)
    2. 事件处理
    3. 动画设计
    4. Ajax交互

所以请注意,jQuery是一个专注于DOM的框架 ,不针对ES与BOM

jQuery的语法格式

jQuery主要包含三部分

  1. 起始标志符$
  2. 选择器
  3. 封装的方法(只有一个属性length属性)

jQuery需要通过第三方JS库来实现,所以我们需要从网络上面下载jQuery的库以后才能使用,可以在官网下载,也可以通过npm去下载

下载完成以后,请在需要的页面进行导入

 <script src="./js/jquery.js" type="text/javascript"></script>

文档就绪函数

jQuery主要的操作集中在DOM操作里面,所以它必须等到当前的网页加载完毕以后才能进行,在以前的时候,我们需要通过window.onload才能进行

window.onload=function(){
    //要执行的代码
}

如果有了jQuery,里面有一个专门的方法ready代表当前文档已经加载完毕了

$(document).ready(function(){
    //要执行的代码
});

上面的代码代表选中了document当前文档,ready是一个是一个事件方法,代表文档加载完毕以后的方法,里面接收一个回调函数!

请注意,在写jQuery代码之前,一定要注意写文档就绪函数

因为文档就绪函数是经常使用的一个函数,所以它在这里有一种简化的写法

$(function(){
    //要执行的代码      
    //这就是简化的文档就绪函数
});

可以直接在选择器里面放一个function 回调

思考window.onload与jQuery里面的$(document).ready()有什么区别?

onload后执行,ready先执行,一个是 jQuery里面的方法,一个是window里面的事件

jQuery选择器

jQuery的选择器在原有的CSS选择器上面做了一些扩展,我们主要是对这些扩展再重新的做一次记忆就行了

参考手册

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")class="intro" 的所有元素
.class,.class$(".intro,.demo")class 为 "intro" 或 "demo" 的所有元素
element$("p")所有 <p>元素
el1,el2,el3$("h1,div,p")所有<h1>、<div><p>元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数<tr>元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
:odd$("tr:odd")所有奇数<tr> 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
:first-child$("p:first-child")属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type$("p:first-of-type")属于其父元素的第一个 <p> 元素的所有<p>元素
:last-child$("p:last-child")属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type$("p:last-of-type")属于其父元素的最后一个<p>元素的所有 <p>元素
:nth-child(n)$("p:nth-child(2)")属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n)$("p:nth-last-child(2)")属于其父元素的第二个子元素的所有 <p>元素,从最后一个子元素开始计数
:nth-of-type(n)$("p:nth-of-type(2)")属于其父元素的第二个 <p> 元素的所有<p>元素
:nth-last-of-type(n)$("p:nth-last-of-type(2)")属于其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计数
:only-child$("p:only-child")属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type$("p:only-of-type")属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child$("div > p")<div> 元素的直接子元素的所有 <p>元素
parent descendant$("div p")<div> 元素的后代的所有 <p> 元素
element + next$("div + p")每个 <div> 元素相邻的下一个<p> 元素
element ~ siblings$("div ~ p")<div>元素同级的所有 <p>元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 值从 0 开始)
:gt(no)$("ul li:gt(3)")列举 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列举 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的输入元素
:header$(":header")所有标题元素 <h1>, <h2>...
:animated$(":animated")所有动画元素
:focus$(":focus")当前具有焦点的元素
:contains(text)$(":contains('Hello')")所有包含文本 "Hello" 的元素
:has(selector)$("div:has(p)")所有包含有 <p>元素在其内的 <div>元素
:empty$(":empty")所有空元素
:parent$(":parent")匹配所有含有子元素或者文本的父元素。
:hidden$("p:hidden")所有隐藏的 <p>元素
:visible$("table:visible")所有可见的表格
:root$(":root")文档的根元素
:lang(language)$("p:lang(de)")所有 lang 属性值为 "de" 的<p> 元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='default.htm']")所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]$("[href!='default.htm']")所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]$("[href$='.jpg']")所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value]$("[title|='Tomorrow']")所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value]$("[title^='Tom']")所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value]$("[title~='hello']")所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value]$("[title*='hello']")所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][*name2*=*value2*]$( "input[id][name$='man']" )带有 id 属性,并且 name 属性以 man 结尾的输入框
:input$(":input")所有 input 元素
:text$(":text")所有带有 type="text" 的 input 元素
:password$(":password")所有带有 type="password" 的 input 元素
:radio$(":radio")所有带有 type="radio" 的 input 元素
:checkbox$(":checkbox")所有带有 type="checkbox" 的 input 元素
:submit$(":submit")所有带有 type="submit" 的 input 元素
:reset$(":reset")所有带有 type="reset" 的 input 元素
:button$(":button")所有带有 type="button" 的 input 元素
:image$(":image")所有带有 type="image" 的 input 元素
:file$(":file")所有带有 type="file" 的 input 元素
:enabled$(":enabled")所有启用的元素
:disabled$(":disabled")所有禁用的元素
:selected$(":selected")所有选定的下拉列表元素
:checked$(":checked")所有选中的复选框选项
.selector$(selector).selector在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target$( "p:target" )选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素

上面的jQuery选择器,jQuery通过上面的选择器,可以快递的选择元素,但请注意它的返回类型

它返回的是一个jQuery.fn.init这个东西,它是一个数组

<ul class="ul1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul class="ul2">
    <li>第四项</li>
    <li>第五项</li>
    <li>第六项</li>
</ul>

在上面的网页文档里面,我们用jQuery选择器去操作

$(选择器,区域);   //默认情况下为document
$(selector,context);
//context代表你在哪个区域里面在选择,默认是document整个文档
$("li"); //在整个document里面去找li
document.querySelectorAll("li")

如果仅仅只是想选择ul1下面的li

document.querySelectorAll(".ul1>li");
//-------------------
$(".ul1>li");
//---------------------
//如果非要使用两个参数
var ul1=document.querySelector(".ul1");   //首先拿到ul1
ul1.querySelectorAll("li");
//或
$("li",ul1);

选中ul1里面的第1个li怎么办?

$(".ul1>li:first-child");
$(".ul1>li")[0];
$(".ul1>li:nth-child(1)");
$(".ul1.li:nth-of-type(1)");
$(".ul1>li:eq(0)");  //这是jQuery新增的选择器

选中ul1里面的前2个li怎么办

$(".ul1>li:nth-child(-n+2)");
$(".ul1>li:lt(2)");   //这是jQuery新增的选择器

选中ul1里面的索引大于1的li怎么办

$(".ul1>li+li+li");
$(".ul1>li:gt(1)");  //jQuery新增的

总结:

eq代表当前索引 ,lt代表小于这个索引,gt代表大于这个索引,它是jQuery里面新增的选择器,css里面不具备

案例

请将下面表格当中的“旷工”与"缺卡"标记出来

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .table1{
           width: 500px;
           border: 1px solid black;
           border-collapse: collapse;
           text-align: center;
       }
       .table1 tr th,.table1 tr td{
           border: 1px solid black;
       }
   </style>
</head>
<body>
   <table class="table1">
       <tr>
           <th>日期</th>
           <th>星期一</th>
           <th>星期二</th>
           <th>星期三</th>
           <th>星期四</th>
           <th>星期五</th>
       </tr>
       <tr>
           <td>张力</td>
           <td>正常</td>
           <td>上班1缺卡</td>
           <td>正常</td>
           <td>旷工</td>
           <td>正常</td>
       </tr>
       <tr>
           <td>王五</td>
           <td>正常</td>
           <td>正常</td>
           <td>旷工</td>
           <td>正常</td>
           <td>下班1缺卡</td>
       </tr>
       <tr>
           <td>李四</td>
           <td>上班2缺卡</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
           <td>旷工</td>
       </tr>
       <tr>
           <td>张力</td>
           <td>旷工</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
           <td>正常</td>
       </tr>
   </table>
</body>
<script src="./js/jquery.js"></script>
<script>
   //假设没有jQuery
   /*
   var tds=document.querySelectorAll(".table1 td");
   tds.forEach(function(item,index,a){
       if(item.innerText.trim()=="旷工"){
           item.style.backgroundColor="red";
       }
       else if(item.innerText.trim().includes("缺卡")){
           item.style.backgroundColor="blue";
       }
   })
   */
   $(".table1 td:contains('旷工')").css("backgroundColor","red");
   $(".table1 td:contains('缺卡')").css("backgroundColor","blue");
</script>
</html>

jQuery里面的方法

jQuery的本质就是把DOM里面的常用操作封装成了一些方法,提供给用户使用,这些方法我们可以大致分为以下几类

事件方法

jQuery将一些常用的事件绑定封装成了方法,方便用户能够快速的进行事件绑定

  • click方法,它用来绑定选中元素的单击事件

    $("#btn1,#btn2,#btn3").click(function (event) {
        console.log("hello world", new Date());
    })
    
  • dblclick方法,它用来绑定选中元素的单击事件

    $("#btn1,#btn2,#btn3").dblclick(function (event) {
        console.log("hello world", new Date());
    })
    
  • keydown方法键盘按下去

  • keyup键盘松开

  • keypress键盘敲击

  • mousedown鼠标按下

  • mouseup鼠标松开

  • mouseenter鼠标进行

  • mouseleave离开

  • hover本身不是一个事件,它是把我们的mouseentermouseleave结合在了一起

    $(".div1").hover(function(){
        console.log("我hover进去了",new Date());
    },function(){
        console.log("我hover出来了",new Date());
    })
    

    第一个回调代表鼠标进入 ,第二个回调代表鼠标离开

上面的方法把常用二级DOM事件都做成了事件方法

鼠标事件键盘事件表单事件文档/窗体事件
clickkeydownsubmitload
dblclickkeyupchangeresize
mouseenterkeypressfocusscroll
mouseleave blurunload

jQuery的事件方法只是把一些方法的事件封装成了方法,但是对于一些不常用的,怎么办呢?

这个时候jQuery就提供了一个on的通用方法

on方法的参数可以是2个,也可以3个

如果是2个,则如下所示,代表常规的事件绑定

$(".div1").on("touchstart",function(event){
    console.log("我触摸了");
})

上面的代码就是绑定了touchstart的事件

如果是3个,则代表事件委托方式的绑定,案例如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .ul1{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <ul class="ul1">
        <li>第一项</li>
        <li>第二项</li>
        <li class="active">第三项</li>
        <li>第四项</li>
    </ul>
</body>
<script src="./js/jquery.js"></script>
<script>
    var newli=document.createElement("li");
    newli.className="active";
    newli.innerText="插入项";

    $(function(){
        //对ul1下面的所有li绑定了一个单击事件
        /*
        $(".ul1>li").on("click",function(){
            console.log("我点击了",new Date());
        })    
        */

        //事件绑定在.ul1上面,但是事件的触发者li.active
        $(".ul1").on("click",".active",function(event){
            //this指向了是.active这个DOM元素
            console.log("我点击了",new Date());
        });
        //第一个参数代表事件名称,第二个参数代表触发者判断条件,第三个代表事件要调用的方法
    })
</script>
</html>

注意事件方法里面的this指向问题

  1. 在jQuery的事件方法里面,它的this应该和普通的事件绑定一样指向当前事件绑定的对象【常规方式绑定】
  2. 在jQuery的事件委托绑定里面,它的this指向了是on的第二个参数

注意事件对象的变化

jQuery当中默认会接收一个事件对象,可以在回调方法里面用参数的形式接收到。这一个事件对象不同于之学习的DOM里面的事件对象

在DOM的事件对象里面,它最终是继承自Event这个对象,而在jQuery的事件里面,它是单独的封装成了一个对象,继承了object

在阻止事件传递的方法,原生的DOM里面,它需要设置属性cancelBubble 与调用方法stopPropagation(),现在在jQuery里面,则只需要调用event.stopPropagation();就可以了

在阻止事件的默认行为方法,如果是0级DOM,可以直接return false 如果是2级DOM可以直接调用preventDefault()方法,现在在jQuery里面则两种都可以用

注意事件的移除

在jQuery里面,我们的on相当于addEventListener添加事件监听 ,但是同时还有一个方法off 相当于移除事件监听

$(function () {
    $(".ul1>li").on("click",function(event){
        console.log(this);
    });
})

上面的代码是对ul1下面的li绑定了事件

$(".ul1>li").off("click");

这一段代码相当于把ul1下面的li的click事件监听移除掉

注意一次性事件绑定方法

jQuery提供one的方法,能够让元素在绑定事件以后只执行一次,执行一次以后这个事件自动移除掉

$(".ul1>li").one("click",function(event){
    console.log(this);
})

? 扩展:在很早期的时候,jQuery提供给用户绑定事件的方法不是on,如果只是普通绑定使用的是bind的方法,如果是委托的绑定使用的是delegate,如下代码所示

普通绑定

$(".ul1>li").bind("click",function(event){
    console.log(this);
})

委托绑定

$(".ul1").delegate("li","click",function(event){
    //它的参数顺序与on是不一样的
    console.log(this);
});

在老的版本里面是通过这两种方式来进行事件绑定的,但是用起来不太友好 ,所以后期就使用了on 一个方法来解决两个问题

更老的版本里面有还有一个live()是绑定方法,然后对应的移除是die()


DOM选取方法

jQuery已经有选择器的情况之下为什么还需要DOM取选的方法?

因为jQuery的选择器选取的元素只能够操作后代子代以及后面的兄弟,不能操作父级和前面的哥哥,所以必须有一套完整DOM选取方法去弥补这样的一个区别

<div class="div1">
    <ul class="ul1">
        <li class="li0">
            <span>大家好</span>
            <span>我叫杨标</span>
        </li>
        <li class="li1">
            <p>你们好</p>
            <p>这是jQuery</p>
        </li>
        <li>
        	第三项
        </li>
    </ul>
</div>
<h2 >天气非常不错</h2>

jQuery选取子级元素children(selector)

jQuery可以通过选择器选取子级元素,同时也可以通过DOM自带的方法去获取子级元素

$(".ul1>li");  //直接通过选择器选取
$(".ul1").children();

上面的两各方法都可以获取到ul1下面所有的li元素

如果我们需要获取ul1下面class为li1的原素呢?

$(".ul1>.li1");  //直接通过选择器获取
$(".ul1").children(".li1");

上面的jQuery方法里面,我们可以看到children方法在这里可以接收一个参数,这个参数是选择器,相当于在所有的子级元素里面用选择器过滤一次

jQuery获取后代元素

jQuery可以通过选择器空格来获取后代元素,同时也有DOM方法去获取后代元素

如果我现在仅仅只是想获取ul1下面的 p标签

$(".ul1 p");
$(".ul1").find("p");

find方法相当于在后代去找元素,它不一定停留在子代,find后面必须接一个选择器,如果想找到所有的,请给一个*的选择器

jQuery去找父级元素parent()

jQuery不能够通过选择器去找父亲,但是DOM的方法可以

如果我们现在希望找到ul1的父亲

$(".ul1").parent();

jQuery找所有的父级元素parents()

$(".ul1").parents();  

它会一直往上找,直到找到html

jQuery找父级元素,截止到某一个点parentsUntil()

$(".ul1").parentsUntil("html")

从.ul1开始向父级找,找到html结果,但是不包含html(找到它,但是不包含它)

jQuery找后面相邻兄弟next()

现在找li0后面的一个li元素

$(".li0+li");      //通过选择器获取
$(".li0").next();   //通过jQuery方法的DOM操作来获取

jQuery找后面所有的兄弟nextAll()

现在找li0后面的所有li元素

$(".li0~li");
$(".li0").nextAll();

jQuery找后面兄弟,直接某个结束nextUntil()

$(".li0").nextUntil(".li1");

在后面的兄弟里面去找,找到它,但不包含它

jQuery找前面的兄弟prev ()

$(".li1").prev()

jQuery找前面所有的兄弟prevAll()

$(".li1").prevAll()

jQuery找后面兄弟,直接某个结束prevUntil()

$(".li1").prevUntil(".li0");  
//找到它,但是不包含它

jQuery找到前面的和后面的兄弟siblings()

$(".li1").siblings()

扩展: 现在我们学习的方法总结如下

选取位置选择器DOM方法jQuery方法
子代选取>children属性**children()**方法
后代选取空格**find()**方法
父级选取parentElementparent()/parents()/parentsUntil()方法
相邻弟弟+nextElementSibling**next()**方法
普通弟弟~**nextAll()**方法/nextUntil()方法
相邻的哥哥previousElementSibling**prev()**方法
普通的哥哥**prevAll()**方法/prevUntil()方法
前后兄弟**siblings()**方法
第一个:first-childfirstElementChildfirst()
最后一个:last-childlastElementChildlast()
符合条件过滤选择器过滤filter()
排除:notnot()

在上面加粗的方法里面,还可以接收一个选择择做为参数,将选择的结果做一更为严谨的过滤

注意:DOM的选取方法与$(选择器)返回的结果是一个类型,在进行事件绑定的时候,this以最后一次选取的结果为主

$(".ul1").children().click(function(){
    console.log(this);  //this指向 thchilcren()选取的元素
})

//委托的this指向第二个参数
$(".ul1").children().on("click","span",function(){
    console.log(this);  //this指向 span
})

jQuery选中指定索引的子元素eq(index)

在之前的时候,我们的CSS选择器完成

$(".ul1>li:nth-child(2)");
$(".ul1>li:nth-of-type(2)");
$(".ul1>li:eq(1)")   //通过jQuery的选择器来完成
$(".ul1>li")[1];      //通过索引来的
$(".ul1>li").eq(1);   //通过jQuery的方法来选取的

jQuery选中第一个子元素first()

$(".ul1>li:first-child");
$(".ul1>li").first()

jQuery选中最后一个子元素last()

$(".ul1>li:last-child");
$(".ul1>li").last();   //jQuery的方法

jQuery选中ul1下面li的class为li1的filter()

$(".ul1>li.li1");
$(".ul1").children("li.li1");
$(".ul1>li").filter("li.li1");

filter()方法是过滤指定符号条件的结果

jQuery选中ul1下面li的class不为li1的not()

$(".ul1>li:not(.li1)");
$(".ul1>li").not(".li1")

filter()方法与not()是相对的


DOM操作方法

添加的方法

jQuery里面添加的方法全部都是基于DOM里面的三个方法来完成的insertAdjacentElementinsertAdjacentHTML,insertAdjacentText

  1. append()该方法在元素的内部的最后去添加内容,它相当于beforeEnd结束之前
  2. after()该方法在元素的后面去添加内容,相当于afterEnd结束之后
  3. before()该方法在元素的前面去添加内容 ,相当于beforeBegin开始之前
  4. prepend()该方法在元素的里面的最前面去添加内容,它相当于 afterBegin开始之后
DOM位置jQuery方法说明
beforeBeginbefore()开始之前
afterBeginprepend()开始之后
beforeEndappend()结束之前
afterEndafter()结束之后

上面的四个方法会根据你插入的内容自动的去调用*Element*HTML*Text这三个方法

删除的方法

在jQuery里面,删除的方法主要是两个情况

  1. remove() 它删除自身,同时也删除了自己的子元素
  2. empty() 它只清空自己的子元素,保留当前自身

属性方法

jQuery将对DOM的常用属性操作封装成了方法,我们可以直接使用这些方法进行DOM的常用属性操作

  1. html()

    该方法主要是对DOM元素的innerHTML这个属性进行操作,这个操作分为取值与赋值过程

    如果html有参数,则是赋值,如果没有参数则是取值

    但要注意,如果是取值,返回的是第一个,如果是赋值则可以批量进行

    $(".ul1>li").html();  //取值第一个
    $(".ul1>li").html("我在赋值");   //批量赋值
    
  2. text()

    该方法主要对DOM元素的innerText这个属性进行操作,与html() 一样,取单个值,批量赋值。如果没有参数则是取值,如果有参数则是赋值

  3. val()

    该方法主要是对表单元素进行DOM操作,因为表单元素有一个特殊的属性value,这个操作也分为取值与赋值过程,有参数就赋值,没参数就取值


  1. attr()

    该方法用于对DOM元素的属性进行操作,它接收一个参数或两个参数,一个参数代表取这个属性的值,二个参数代表对这个属性进行赋值, 它对应的是DOM里面的getAttribute()setAttribute()

    $("#userName").attr("placeholer");
    $("#userName").attr("type");
    $("#userName").attr("placeholder","请输入密码");   //对placeholder这个属性进行赋值
    
  2. removeAttr()

    该方法是对DOM元素的属性进行删除,相当于DOM里面的removeAttribute()

    $("#userName").removeAttr("placeholder");
    //删除placeholder这个属性
    
  3. prop()

    该方法是对DOM的单属性进行操作

    //禁用disabled=false;
    $("#userName").prop("disabled",false);
    //只读readonly=true;
    $("#userName").prop("readonly",true);
    
  4. data()

    该方法主要对DOM的以data-开头的自定属性进行获取

    <input type="text" id="userName" data-age="18" data-sex="男" data-user-pwd="123456" disabled placeholder="请输入用户名">
    

    现在我们通过jQuery的方法去获取里面的自定义属性

    $("#userName").data("age");
    $("#userName").data("sex");
    $("#userName").data("userPWd");
    $("#userName").data("user-pwd");
    $("#userName").attr("data-sex");
    //赋值
    $("#userName").attr("data-age",50);
    

    data的方法仅仅只能用于获取,不要用于赋值,如果要赋值了还是调用attr()方法进行赋值


  1. addClass()

    该方法主要是对DOM元素的classList 进行add()操作

    $(".div1").addClass("active")
    
  2. removeClass()

    该方法主要是对DOM元素的classList 进行remove()操作

    $(".div1").removeClass("active")
    
  3. toggleClass()

    该方法主要是对DOM元素的classList 进行toggle()操作

    $(".div1").toggleClass("active");
    

  1. css()

    该方法主要用于对CSS样式的取值与赋值,它取值是通过DOM的window.getComputedStyle()这个方法来获取,它的赋值主要是通过style这个属性来完成

    这个方法的使用场景与使用方法多种多样

    $(".div1").css("width");  // 获取CSS width
    $(".div1").css("border");  //获取CSS border
    $(".div1").css("width","200px");   //  它的赋值操作是基于style来进行的
    

    到目前为止,我们都发现一个参数是取值,两个参数是赋值,其实并不是的

    第一种情况

    现在需要将div1的宽度设置为200px,高度设置200px

    $(".div1").css("width","200px");
    $(".div1").css("height","200px");
    $(".div1").css("backgroundColor","blue");
    

    因为jQuery是支持链式语法,所以上面的选择是一样的,我们可以使用链式语法去完成

    $(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue")
    

    还可以像这样即操作CSS也操作属性

    $(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue").text("我改变了你的样式").css("color","red")
    

    第二种情况

    这一种赋值方式是直接通过对象去完成的

    $(".div1").css({width:"200px",height:"200px",backgroundColor:"blue",color:"red"}).text("我用另一种方式再完成")
    

    注意:请注意上面的backgroundColor,如果碰到CSS属性名有-则去掉-后面的首字母大写

    如果你不想转,你就加个引号把它包含起来"background-color"

动画方法

  1. 显示隐藏

    • show()显示
    • hide()隐藏
    • toggle()在隐藏与显示之间在进行切换

    上面的三个方法接收参数,如果有参数则会实现一个过渡的效果,这个参数可以是三个枚举值slow/normal/fast,由慢到快,也可以接收一个具体的时间值,这个值以毫秒为单位

    $(".div1").toggle(5000);
    $(".div1").toggle("fast");
    
  2. 淡入淡出

    • fadeIn()淡入
    • fadeout()淡出
    • fadeToggle()在淡入和淡出之间进行切换
    • fadeTo(j时间,透明度)切换到指定透明度

    上面的前三个方法也可以接收参数,与“显示隐藏”保持一致,可以接收枚举参数,也接收具体时间值

  3. 上拉下滑

    • slideUp()上拉
    • slideDown()下滑
    • slideToggle()在上拉下滑之间进行切换

    上面的三个方法也接收参数

  4. 自定义动画

    上面的三个动画是jQuery提供给我们的常用的三个动画 ,但是我们还可以定义自己的动画效果,它使用的方法是animate

    $(".div1").animate({marginLeft:"500px"},2000).animate({marginTop:"200px"},2000);
    

动画方法的回调

在调用jQuery的动画的时候,执行动画是需要时间的,如果我们希望某一段代码是在动画 结束以后去进行的,那么,我们则需要使用回调,如下代码所示

$("#btn1").click(function(){
    $(".div1").slideUp(5000);
    alert("我在上拉");
});

如果我们仅仅只是以上面的代码去运行,会发现,动画还没有完成,下面的弹窗就出来了,这不行

解决方法一

 $("#btn1").click(function(){
     $(".div1").slideUp("5000");
     setTimeout(function(){
         alert("我在上拉");
     },5000);
 });

使用定时器这种方式局限性非常大,不推荐使用

解决方法二

$("#btn1").click(function(){
    $(".div1").slideUp(5000,function(){
        alert("hello world");
    })
});

这种方法是jQuery提供给用户的,所以我们可以在这个里面直接使用,同时上面讲的四种动画有回调

 $(".div1").animate({
     marginLeft:"500px"
 },2000,function(){
     alert("我结束了");
 })

解决方法三

利用jQuery的排队等待方法

$("#btn1").click(function(){
    //queue是排队
    $(".div1").slideUp(5000).queue(function(){
        alert("hello world");
        $(this).dequeue();   //出队
    }).queue(function(){
        alert("你好,世界");
        $(this).dequeue();  //出队
    }).slideDown();
});

jQuery的链式语法

jQuery支持链式语法,本质就是在选取元素结束以后可以在后面多次调用方法

jQuery获取元素大小

jQuery提供了四个方法用于获取元素的大小

  • width()/height()

    指元素content的大小

  • innerWidth()/innerHeight()

    指元素的content+padding的大小

  • outerWidth()/outerHeight()

    指元素的content+padding+border

  • outerWidth(true)/outerHeight(true)

    指元素的content+padding+border+margin

jQuery Dimensions

jQuery的其它方法

在之前,我们在学习jQuery的方法的时候,都是通过一个选择器选中元素以后再去调用jQuery的方法,但是jQuery本身也提供一些方法,可以直接使用

  1. each()方法

    这个方法是jQuery提供给用户进行遍历的方法,当用户选取一组元素可以以后可以直接调用each方法进行遍历

     //each是遍历的方法
    $(".ul1>li").each(function(index,ele){
        console.log(index);
        console.log(ele);
        //在这里要注意一点,它的this指向当前遍历的元素
        console.log(this);
    })
    

    注意:回调方法里面的参数不要与数组forEach回调用三个参数弄混了


接下来就是jQuery对象方法,因为方法既是方法也是对象

  1. each()方法

    这个each和上面的each是不一样的,虽然方法名相同,但是调用的对象不一样

     var li1=$(".ul1>li"); 
    //第一个参数代表你要遍历的数组或类数组,第二个代表回调函数
    $.each(li1,function(index,ele){
        console.log(index);
        console.log(ele);
    });
    

    这个时候是把jQuery当成对象在进行调用,它不仅可以遍历jQuery得到的DOM集合,还可以遍历类数组

     var lis=document.querySelectorAll(".ul1>li");
    //返回一人NodeList   它是一个类数组
    $.each(lis,function(index,ele){
        console.log(index);
        console.log(ele);
    })
    

    它还可以遍历数组

    var arr=["a","b","c","d","e"];
    $.each(arr,function(index,ele){
        console.log(index);
        console.log(ele);  
    }); 
    
  2. makeArray()

    在以前的时候,我们可以使用Array.prototype.slice.call(类数组)

    jQuery提供这个方法将类数组转换成数组,语法格式如下

    $.makeArray(类数组,数组结果)
    
    var resultArray=[];
    $(function(){
        var lis=document.querySelectorAll(".ul1>li");
        $.makeArray(lis,resultArray);
    });
    

    经过上面的运算以后,resultArray它就是一个数组,这个数组里面的元素就是lis里面的元素

  3. toArray()

    jQuery提供该方法直接将选中的结果转为数组

    $(".ul1>li").toArray();
    
  4. ajax方法

    该方法会出专题讲解

1

评论区