4）jQuery的基礎部分和js的部分

時間  2021-08-14
標籤 javascript css html 前端 java node jquery 面試 ajax json 欄目 JQuery 简体版
原文   原文鏈接

1：js：javascript

包含三部分：css

 

ESMAScript：基礎語法html

Array（）前端

索引 、length、push（）、pop（）java

DOM：node

   獲取DOM的三種方式：jquery

（1）Id面試

（2）Classajax

（3）標籤獲取 TayNamejson

BOM：

入口函數：

等待這文檔，

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box"></div>
<script>
    window.onload=function () {
        alert(2)
    }
//    有覆蓋現象
        window.onload=function () {
        alert(3)  
    }
</script>

</body>
</html>

 

這裏的var能夠變量提高：

Var =i;

I = 0; \能夠寫成var i = 0；

<script>
    window.onload=function () {
        alert(2)
    }
var oBoxs = document.getElementsByClassName('box');
    console.log(oBoxs);

    for (var i = 0;i < oBoxs.length; i++){
        oBoxs[i].onclick = function () {
            console.log(i);
            console.log(this);
            console.log(this.innerText);
        }
    }
</script>

 

總結：

 

Var 聲明的變量   存在變量提高

Let聲明的變量    是塊級做用域

Const 聲明的是常量  一旦聲明變量 不可改變

 

 

DOM的建立和添加：

DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。

 

圖片1.png

 

DOM能夠作什麼

找對象（元素節點）

設置元素的屬性值

設置元素的樣式

動態建立和刪除元素

事件的觸發響應：事件源、事件、事件的驅動程序

操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：

    var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

 

    var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s

 

    var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

 

 

建立節點

格式以下：

新的標籤(元素節點) = document.createElement("標籤名");

好比，若是咱們想建立一個li標籤，或者是建立一個不存在的adbc標籤，能夠這樣作：

<script type="text/javascript">

    var a1 = document.createElement("li");   //建立一個li標籤

    var a2 = document.createElement("adbc");   //建立一個不存在的標籤

    console.log(a1);

    console.log(a2);

 

    console.log(typeof a1);

    console.log(typeof a2);</script> 

 圖片2.png

 

插入節點

插入節點有兩種方式，它們的含義是不一樣的。

方式1：

 父節點.appendChild(新的子節點);

解釋：父節點的最後插入一個新的子節點。

方式2：

父節點.insertBefore(新的子節點,做爲參考的子節點);

解釋：

· 在參考節點前插入一個新的節點。

· 若是參考節點爲null，那麼他將在父節點最後插入一個子節點。

刪除節點

格式以下：

  父節點.removeChild(子節點);

解釋：用父節點刪除子節點。必需要指定是刪除哪一個子節點。

若是我想刪除本身這個節點，能夠這麼作：

node1.parentNode.removeChild(node1);

複製節點（克隆節點）

格式以下：

  要複製的節點.cloneNode();       //括號裏不帶參數和帶參數false，效果是同樣的。

 

  要複製的節點.cloneNode(true);

括號裏帶不帶參數，效果是不一樣的。解釋以下：

不帶參數/帶參數false：只複製節點自己，不復制子節點。

帶參數true：既複製節點自己，也複製其全部的子節點。

 

設置節點的屬性

咱們能夠獲取節點的屬性值、設置節點的屬性值、刪除節點的屬性。

咱們就統一拿下面這個標籤來舉例：

<img src="images/1.jpg" title="美女圖片" alt="地鐵一瞥" id="a1">

下面分別介紹。

1、獲取節點的屬性值

方式1：

    元素節點.屬性;

    元素節點[屬性];

舉例：（獲取節點的屬性值）

<body><img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">

<script type="text/javascript">

    var myNode = document.getElementsByTagName("img")[0];

 

    console.log(myNode.src);

    console.log(myNode.className);    //注意，是className，不是class    console.log(myNode.title);

 

    console.log("------------");

 

    console.log(myNode["src"]);

    console.log(myNode["className"]); //注意，是className，不是class    console.log(myNode["title"]);</script></body>

方式2：（推薦）

素節點.getAttribute("屬性名稱");

例子：

    console.log(myNode.getAttribute("src"));

    console.log(myNode.getAttribute("class"));   //注意是class，不是className

    console.log(myNode.getAttribute("title"));

刪除節點的屬性

格式：

    元素節點.removeAttribute(屬性名);

舉例：（刪除節點的屬性）

    myNode.removeAttribute("class");

    myNode.removeAttribute("id");

 

舉例：

留言板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .close{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                cursor: pointer;
                background-color: rgba(0,0,0,.1);
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1>簡易留言板</h1>
        <div id="box">
            <!--<ul>

            </ul>-->

        </div>
        <textarea id="msg"></textarea>
        <input type="button" id="btn" value="留言"/>
        <button onclick="sum()">統計</button>
    </body>
    <script type="text/javascript">

        // 0 將ul標籤添加到div#box標籤中
        var oUl = document.createElement('ul');
        var oBox = document.getElementById('box');
        oBox.appendChild(oUl);

        var oBtn = document.getElementById('btn');
        var oMsg = document.getElementById('msg')
        // 控制留言的總數量
        var count = 0;
        oBtn.onclick = function(){


            // 點擊留言按鈕事件操做
            // 1.建立li標籤
            var oLi = document.createElement('li');
            //2.設置內容
            oLi.innerHTML = oMsg.value + "<span>X</span>"

            // 3.若是想在插入的第一個li獲取的前面繼續添加li標籤
            //3.1獲取li標籤
            var olis = document.getElementsByTagName('li');
             //3.2 若是是第一次添加的li標籤，則直接添加到ul的後面
            if(olis.length == 0){
                oUl.appendChild(oLi);
                count++;

            }else{
                // 3.3 若是不是第一次添加的li標籤，則插入到第一個li標籤的前面
                oUl.insertBefore(oLi,olis[0]);
                count++;
            }
            // 4.添加完成以後 清空textarea的值
            oMsg.value = '';


            // 5.點擊X的時候刪除當前的一條數據
            //5.1先獲取全部的X
            var oSpans = document.getElementsByTagName('span');

            // 5.2for循環 對全部的X添加點擊事件
            for(var i = 0; i< oSpans.length; i++){
                oSpans[i].onclick  = function(){
                    // 5.3 移除當前的li標籤
                    oUl.removeChild(this.parentNode)
                    count--;
                }
            }


        }

        function sum(){
            alert('一共發佈了'+count+'條留言');

        }
    </script>
</html>

結果：

圖片3.png 

使用js模擬選擇器中的hover

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: red;
        }
    </style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>

<script>
    //需求：鼠標放到哪一個button上，改button變成×××背景（添加類）


    var btnArr = document.getElementsByTagName("button");
    //綁定事件
    for(var i=0;i<btnArr.length;i++){   //要爲每個按鈕綁定事件，因此用到了for循環
        btnArr[i].onmouseover = function () {
            //【重要】排他思想：先把全部按鈕的className設置爲空，而後把我（this）這個按鈕的className設置爲current
            //排他思想和for循環連用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";  //【重要】核心代碼
        }
    }

    //鼠標離開current時，還原背景色
    for(var i=0;i<btnArr.length;i++){   //要爲每個按鈕綁定事件，因此用到了for循環
        btnArr[i].onmouseout = function () { //鼠標離開任何一個按鈕時，就把按鈕的背景色還原
            this.className = "";
        }
    }

</script>

</body>


</html>

結果：

 

 圖片4.png

建立對象的幾種經常使用方式

1.使用Object或對象字面量建立對象

2.工廠模式建立對象

3.構造函數模式建立對象

4.原型模式建立對象

 

 

使用Object或對象字面量建立對象

JS中最基本建立對象的方式：

var student = new Object();

student.name = "easy";

student.age = "20";

 

 

當咱們要建立同類的student1，student2，…，studentn時，咱們不得不將以上的代碼重複n次....

var sutdent1 = {

  name : "easy1",

  age : 20

};

var sutdent2 = {

  name : "easy2",

  age : 20

};

 

...

var sutdentn = {

  name : "easyn",

  age : 20

};

 

 

<script>
    var person ={
        name: '張三',
        age : 18,
        fav:function () {
            alert(this.name)
        }
    };
    console.log(person.fav())
</script>

 

 圖片5.png

圖片6.png

 

使用構造函數的方式建立對象：

圖片7.png 

 

工廠模式建立對象

JS中沒有類的概念，那麼咱們不妨就使用一種函數將以上對象建立過程封裝起來以便於重複調用，同時能夠給出特定接口來初始化對象

function createStudent(name, age) {

  var obj = new Object();

  obj.name = name;

  obj.age = age;

  return obj;

}

var student1 = createStudent("easy1", 20);

var student2 = createStudent("easy2", 20);

...

var studentn = createStudent("easyn", 20);

 

 

同時又定義了」生產」水果對象的createFruit()函數：

 

function createFruit(name, color) {

  var obj = new Object();

  obj.name = name;

  obj.color = color;

  return obj;

}

var v1 = createStudent("easy1", 20);

var v2 = createFruit("apple", "green");

<script>
function Student(name,age) {
    this.name = name;
    this.age = age;
    this.alertName = function () {
        alert(this.name)
    }
}
function Fruit(name,color) {
    this.name = name;
    this.color = color;
    this.alertName = function () {
        alert(this.name)
    }
}
全部的類都集成object
var s = new Student('張三',17)
var f = new Fruit('哈哈','green')
console.log(s instanceof Student)
console.log(f instanceof Fruit)
</script>

 

Python和js的對比：

 

圖片8.png 

Es6中的函數能夠寫成箭頭函數

圖片9.png 

舉例對比：

圖片10.png 

 

在js中prototype原型，是每一個對象的父類

 

原型的模式建立對象

原型鏈甚至原型繼承，是整個JS中最難的一部分也是最很差理解的一部分，在這裏因爲咱們課程定位的緣由，若是對js有興趣的同窗，能夠去查閱一下相關JS原型的一些知識點。更加有助於你之後前端JS的面試。

function Student() {

    this.name = 'easy';

    this.age = 20;

}

 

 

Student.prototype.alertName = function(){

    alert(this.name);

};

var stu1 = new Student();var stu2 = new Student();

 

stu1.alertName();  //easy

stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 兩者共享同一函數

 

 

Es6中的文件引入：

Import  aaa   from  xxx

 

前端三大工具：

Grunt

Glup

Webpack

 

做用：

文件壓縮、打包

 

 

定時器：

在js中的定時器分兩種：1、setTimeout() 2、setInterval()

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">

</div>
<script>
    var a = 0;
    var oDiv = document.getElementById('box')
    setInterval(function () {
        a++;
        oDiv.style.marginLeft = a+'px'
        console.log(a)
    },10)
</script>
</body>
</html>

 

圖片11.png 

 

優化後的；有定時器：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = box style="width: 100px;height: 100px;background-color: red;">
</div>
<button id = 'btn'>中止</button>
<script>
var a =0;
function $(id) {
    return document.getElementById(id);
}
var oDiv = document.getElementById('box');
var oBtn = document.getElementById('btn');
var c = setInterval(function () {
    a +=3;
    $('box').style.marginLeft = a+'px';
    console.log(a);
},50)
    $('btn').onclick = function () {
        clearInterval(c)
    }
</script>
</body>
</html>

 

 圖片12.png

 

數據異步機制：

不等待功能

setTimeout(function () {
    alert(2);
    console.log(2222);
},2000)
console.log(1111);

 

 圖片13.png

 

定時器：

<body>
<script>
    setTimeout(function () {
        window.open('http://www.baidu.com');
    },2000);
</script>
</body>

 

圖片14.png 

<script>
    setTimeout(function () {
        window.open('http://www.baidu.com','_self');
    },2000);
</script>
</body>

 

 圖片15.png

自動刷新：

全局刷新：能夠測試使用

<script>
    console.log(1111)
    setTimeout(function () {
        window.location.reload();
    },2000);
</script>

 

 

局部刷新：

必須使用ajax技術

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function (argument) {
    console.log(1111)
    setTimeout(function () {
        console.log(window.navigator)
    },2000);
    }

</script>
</body>
</html>

 

 

 

 圖片16.png

jQuery安裝使用：

圖片17.png 

 圖片18.png

圖片19.png

 

安裝jQuery：

 圖片20.png

 圖片21.png

 

使用jquery

1）先引入jquery

2）入口函數 function（）{}

3）Js對象和jquery對象的轉換   js => jquery

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
    console.log($)
//    文檔加載完成以後
    $(document).ready(function () {
        alert(2)
    });
    $(document).ready(function () {
        alert(23)
    });
</script>
</body>
</html>

 

 圖片22.png

圖片23.png

不會出現js的覆蓋現象

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
    </style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
$(function () {
    $('.box').click(function () {
        $('.box').css('backgroundColor','yellow')
    })
})
</script>
</body>
</html>

 

 

圖片24.png 

點擊一下：

圖片25.png 

 

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
    </style>
</head>
<body>
<div class="box"></div>
<!--先引入包-->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>

<script>
$(function () {
    $('.box').click(function () {
//        $('.box').css('backgroundColor','yellow')
        $('.box').css({
            'background-color':'green',
            'width':'300px'
        })
    })
})
</script>
</body>
</html>

 

 

圖片26.png

 

 

 圖片27.png

Jquery 選擇器：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <ul class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
    </ul>
        <ul class="list2">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
    </ul>
</div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>

<script>
    $(function () {
        console.log($('.box').find('ul.list2,ul.list'));
    })
</script>
</body>
</html>

 

 

效果：

圖片28.png 

$(function () {
    console.log($('.box').children('ul.list2,ul.list'));
})

 

Find是獲取的子孫後代   、  children獲取的是親兒子

 

 

Jquery動畫效果：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">顯示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        $('#btn').click(function(event) {
            $('.box').show();
        })
    })
</script>
</body>
</html>

 

 圖片29.png

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">顯示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            if (isShow){
                $('.box').show();
                isShow = false
                $(this).text('隱藏');
            }else {
                $('.box').hide();
                isShow = true;
                $(this).text('顯示');
            }
        })
    })
</script>
</body>
</html>

 

 

 圖片30.png

 

能夠加上時間：

<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            if (isShow){
                $('.box').show(3000);
                isShow = false
                $(this).text('隱藏');
            }else {
                $('.box').hide(3000);
                isShow = true;
                $(this).text('顯示');
            }
        })
    })
</script>

 

圖片31.png 

防止出現延遲現象，都是快速的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">顯示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').stop().toggle('slow');
        })
    })
</script>
</body>
</html>

 

 

 圖片32.png

 

 

捲簾門效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">顯示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').slideUp(300,function () {
                
            })
            $('.box').slideDown(300,function () {

            })
        })
    })
</script>
</body>
</html>

 

 

 圖片33.png

淡入淡出：效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: none;
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
<button id="btn">顯示</button>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('#btn').click(function(event) {
            $('.box').fadeToggle(1000,function () {
                
            })
        })
    })
</script>
</body>
</html>

 圖片34.png

 

自定義動畫：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        //入口函數
        $(document).ready(function () {
            //需求：鼠標放入一級li中，讓他裏面的ul顯示。移開隱藏。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">三級菜單2</a></li>
                <li><a href="javascript:void(0);">三級菜單3</a></li>
                <li><a href="javascript:void(0);">三級菜單4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

 

 

 圖片35.png

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

 

 圖片36.png

 

 

 

 

Jquery 的屬性操做：

attr()

設置屬性值或者 返回被選元素的屬性值

attr（）屬性的使用：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">

</div>
<script>
    $(document).ready(function () {
       console.log( $('.wrap').attr('id'));
    });
</script>
</body>
</html>

 

 

圖片37.png 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .wrap{
            background-color: red;
        }
        .wrap2{
            background-color: yellow;
        }
    </style>
 <script src="01/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="wrap" id="'box" title="123">

</div>
<script>
    $(document).ready(function () {
       console.log( $('.wrap').attr('id'));
       console.log( $('.wrap').attr('class'));
       $('.wrap').attr('class','wrap2')
    });
</script>
</body>
</html>

 

 

直接將紅色的盒子給覆蓋了顏色成×××：

 

 圖片38.png

removeAttr()

移除屬性

//刪除單個屬性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//刪除多個屬性

$('#box').removeAttr('name class');

 

 

何時使用attr()，何時使用prop()？

1.是有true,false兩個屬性使用prop();

2.其餘則使用attr();

 

addClass（添加多個類名）

爲每一個匹配的元素添加指定的類名。

$('div').addClass("box");//追加一個類名到原有的類名

還能夠爲匹配的元素添加多個類名

$('div').addClass("box box2");//追加多個類名

 

 

 

removeClass

從全部匹配的元素中刪除所有或者指定的類。

 移除指定的類（一個或多個）

$('div').removeClass('box')；

移除所有的類

$('div').removeClass();

 

 

能夠經過添加刪除類名，來實現元素的顯示隱藏

代碼以下：

 

 

var tag  = false;

        $('span').click(function(){

            if(tag){

                $('span').removeClass('active')

                tag=false;

            }else{

                $('span').addClass('active')

                tag=true;

            }    

})

 

 

val

獲取值：

val()用於表單控件中獲取值，好比input textarea select等等

設置值：

 

$('input').val('設置了表單控件中的值')；

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程