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教程