Js和JQuery基础

1.JavaScript的组成

CMAScript (核心)：规定了JS的语法和基本对象

DOM 文档对象模型：处理网页内容的方法和接口

BOM 浏览器对象模型：与浏览器交互的方法和接口

2.JavaScript变量

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。使用var接收

变量的声明：var 变量名; //变量赋予默认值，默认值为undefined（未定义的）

变量的声明和赋值：var 变量名=值; //变量赋予对应的值

在声明JavaScript变量时，需要遵循以下命名规范：

　　必须以字母或下划线开头，中间可以是数字、字符或下划线

　　变量名不能包含空格等符号

　　不能使用JavaScript关键字作为变量名，如：function、this、class

　　JavaScript严格区分大小写。

3.JavaScript数据类型

3.1基本数据类型

　　string 字符串类型。””和’’都是字符串，没有任何区别。 JavaScript中没有单个字符

　　boolean 布尔类型。固定值为true和false

　　number 数字类型。任意数字

　　null 空，一个占位符。

　　undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

注：因为undefined是从null中派生出来的，所以undefined==null

3.2引用数据类型

引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

　　var str = new String();//和java相同

　　var str = new String; //js独有的方式

4.运算符

== 逻辑等。仅仅对比值

===全等。对比值并且对比类型。如果值和类型都相同，则为true；值和类型有一个不同，则为false。除了===比较的是内容和类型外，其他比较运算符都比较的是内容。

JavaScript逻辑运算符没有 & |

5.正则对象

5.1 RegExp对象的创建方式

var reg = new RegExp("表达式"); （开发中基本不用）

var reg = /^表达式$/; 直接量（开发中常用）

直接量中存在边界，即^代表开始，$代表结束，直接量方式的正则是对象，不是字符串，别用引号。

5.2test方法

正则对象.test(string); 用来校验字符串是否匹配正则。全部字符匹配返回true；有字符不匹配返回false。

//练习：验证手机号
var regex=/^1[3,5,7,8][0-9]{9}$/;
var phone="15623637872";
alert(regex.test(phone));

6.JS数组对象

6.1JS数组的特性

JS数组可以看做 Java中的ArrayList 集合。数组中的每一个成员没有类型限制，及可以存放任意类型，数组的长度可以自动修改。

6.2JS数组的四种创建方式

var arr = [1,2,3,”a”,true]; //常用的JS数组。长度5

var arr = new Array();创建一个数组对象，数组长度默认为0

var arr = new Array(4);数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。（仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）

var arr = new Array(“a”,”b”,true); //创建了一个数组，长度3, 数组元素是”a”,”b”,true

7.全局函数（global）

执行：

编码：

解码：

字符串转整数：

字符串转浮点数：

如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。（例如：11.5a55，parseInt结果11，parseFloat结果11.5）

如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN。NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）

8.自定义函数/自定义方法

1）JavaScript函数定义必须用小写的function；

2）JavaScript函数无需定义返回值类型，直接在function后面书写方法名；

3）参数的定义无需使用var关键字，否则报错；

4）JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；

因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；如果形参未赋值，就使用默认值undefined

对象直接量：var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};。

9.BOM对象

BOM（Browser Object Model）浏览器对象模型

9.1消息框

1）alert()：警告框，用来弹出警告消息。示例：alert("弹出吧");

2)confirm()：确认框，用于告知用户信息并收集用户的选择。

示例1：confirm("确认或取消")。该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。“确定”返回ture；“取消”返回false。

3）控制台console：在浏览器的控制台打印。console.log(“内容”);

9.2定时器

1）循环定时器：调用一次就会创建并循环执行这个定时器，直到关闭它为止。

启动循环定时器：setInterval("要调用的方法",毫秒数)

关闭循环定时器：clearInterval(定时器id)

示例：设置一个定时器，倒计时10秒，当时间为0时关闭定时器

<body>
    倒计时<span>10</span>秒
<script language="javascript">
  var t=10;
  function change(){
    t--;
    $("span").text(t)
    if(t<=0){
        clearInterval(id)
    }
  }
  var id=setInterval('change()',1000);
</script>
</body>

2）一次性定时器

一次性定时器，调用一次就会创建并执行一个定时器一次。

启动一次性定时器：setTimeout(“调用方法” , 毫秒值);

关闭一次性定时器：clearTimeout(定时器id)

9.3location对象

location 对象包含浏览器地址栏的信息，常用的属性是href。

示例：设置倒计时10秒后自动跳转到百度首页

<script language="javascript">
  var t=10;
  function change(){
    t--;
    $("span").text(t)
    if(t<=0){
        clearInterval(id)
        window.location.href="http://www.baidu.com"
    }
  }
  var id=setInterval('change()',1000);
</script>

10.DOM对象

DOM（Document Object Model）文档对象模型，将标记型文档中所有内容（标签、文本、属性）都封装成对象。

10.1获取元素对象的四种方式

1）document.getElementById(‘id’); 通过元素ID获取对应元素对象，如果找不到，返回null。

2）document.getElementsByName(); 通过元素的name属性获取符合要求的所有元素。

3）document.getElementsByTagName(); 通过元素的元素名（标签名）属性获取符合要求的所有元素，返回一个数组

4）document.getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素，可以获取到元素节点对象数组；如果找不到，返回空数组。

10.2元素对象常见属性

1）value

获取元素对象的value属性值：元素对象.value

设置元素对象的value属性值：元素对象.value=属性值

2）className

获取元素对象的class属性值：元素对象.className

设置元素对象的class属性值：元素对象. className =属性值

3）checked

获取元素对象的checked属性值：元素对象.checked

设置元素对象的checked属性值：元素对象.checked =属性值

4）innerHTML

获取元素对象的内容体（所有内容）：元素对象.innerHTML

设置元素对象的内容体：元素对象.innerHTML=值

5）innerText

获取元素对象的文本内容：元素对象.inneText

设置元素对象的文本内容：元素对象.innerText=值

示例：模拟炸弹爆炸情景

<body>
    <!--模拟炸弹爆炸的情景-->
    <div id="div">炸弹还有<font id="font" color="red">10</font>秒爆炸！</div>
    <img id="img" width="400px"  height="500px" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4279991917,2910577700&fm=26&gp=0.jpg">
<script>
    var count=10;
    function changeText(){
        var font=document.getElementById("font");
        font.innerText=--count;//改变文本的秒数
        if(count==0){
            var div=document.getElementById("div");
            div.innerHTML="炸弹爆炸啦！";//改变内容
            var image=document.getElementById("img");
            image.src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3056604070,2381022538&fm=26&gp=0.jpg";//改变图片
            clearInterval(id);//清除定时器
        }
    }
    var id=setInterval("changeText()",1000);//开启定时器
</script>
</body>

View Code

11.JS事件

通常鼠标或热键的动作我们称之为事件(Event)

11.1常见的js事件

1）点击事件（onclick）

<body>
    <input type="button" value="点我出发点击事件" onclick="run()">
<script>
    function run(){
        alert("事件触发")
    }
</script>

2）获取焦点事件（onfocus）

<body>
    <input type="text" onfocus="run()">
<script>
     //当鼠标焦点进入输入框时触发
    function run(){
        alert("事件触发");
    }
</script>
</body>

3）失去焦点事件（onblur）

<body>
    <input type="text" onblur="run()">
<script>
    //当输入焦点离开输入框时触发
    function run(){
        alert("事件触发")
    }
</script>
</body>

4）域内容改变事件（onchange）

<body>
    <input type="text" onchange="run()">
<script>
    //当输入框内容发送改变时触发
    function run(){
        alert("事件触发")
    }
</script>
</body>

5）加载完毕事件（onload）

加载完毕事件：页面元素组件加载完毕时触发。

<body onload="run()">
<script>
    function run(){
        alert("事件触发")
    }
</script>
</body>

6）表单提交事件（onsubmit）

表单提交事件：表单的提交按钮被点击时触发，该事件需要返回boolean类型的值来执行提交或阻止表单数据的操作。

事件得到true，提交表单数据；事件得到false，阻止表单数据提交。

<body >
    <form onsubmit="return run()">
        <input type="text" onchange="run()" name="name">
        <input type="submit" value="提交">
    </form>
<script>
    function run(){
        alert("事件触发");
        return true;
    }
</script>
</body>

7）键位事件

onkeyup:键位弹起

onkeydown:键位按下

onkeypress:键位按住

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件

8）鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

<body >
    <input type="text" onmouseover="run()" name="name">
<script>
    function run(){
        alert("事件触发");
    }
</script>
</body>

9）鼠标移出事件（onmouseout）

<body >
    <input type="text" onmouseout="run()" name="name">
<script>
    function run(){
        alert("事件触发");
    }
</script>
</body>

11.2JS事件的两种绑定方式

1)为事件绑定一个无参函数

<input type="text" onclick="run()">

2)为事件绑定一个有参函数

一个参数，非this

<input type="text" onclick="run(1)">

一个参数，是this。这个this指的是当前input对象。　　

<input type="text" onclick="run(this)">

多个函数

<input type="text" onclick="run(this),run2(),run3()">

3)通过DOM绑定

不能传递参数，一个事件只能绑定一个函数。

<body >
    <input type="text" id="name1">
<script>
    function run(){
        alert("事件触发")
    }
    window.onload=function(){
        document.getElementById("name1").onclick=run;
    }
</script>
</body>

12.JS练习题

12.1点击改变灯泡的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>灯光控制</title>
    </head>
    <body>
        <img id="image" src="on.gif" onclick="opened()">
        <script>
            var count=0;
            function opened(){
                count++;
                if(count%2==1){
                    document.getElementById("image").src="off.gif";
                }else{
                    document.getElementById("image").src="on.gif";
                }
            }
        </script>
    </body>
</html>

12.2轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    
    <script>
        var i = 0;
        var id;
        var index = 0;
        var img=["banner_1.jpg","banner_2.jpg","banner_3.jpg"];
        function opened(){//打开定时器
            id=setInterval("changeImg()", 3000);
        }
        function closed(){//关闭定时器
            clearInterval(id);
        }
        function changeImg(){
            index++;
            document.getElementById("banner").src = "img/"+img[index%3];
        }
    </script>
    
</head>
<!--轮播图，定时切换图片，当鼠标进入图片时暂停，移出时播放-->
<body onload="opened()">
    <img id="banner"  src="img/banner_1.jpg" width="100%" onmouseover="closed()" onmouseout="opened()">
</body>
</html>

12.3页面自动跳转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面自动跳转</title>
    </head>
    <body>
        <div id="div" align="center">页面 <font id="font" color="deeppink">5</font> 秒后跳转到百度首页</div>
        <script>
            var second=5;
            function jump(){
                document.getElementById("font").innerText=--second;
                if(second<=0){
                    window.location.href="http://www.baidu.com";
                    clearInterval(id);
                }
            }
            var id=setInterval("jump()",1000);
        </script>
    </body>
</html>

12.4表单验证的js代码

<script>
    window.onload = function(){
        document.getElementById("form").onsubmit = function(){
            //验证用户名
            //验证密码
            //...
            //都成功则返回true
            //
            return checkUsername() && checkPassword();
        }

        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    function checkUsername(){
        var username = document.getElementById("username").value;
        var reg_username = /^\w{6,12}$/;
        var flag = reg_username.test(username);
        var s_username = document.getElementById("s_username");
        if(flag){
            s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    function checkPassword(){
        var password = document.getElementById("password").value;
        var reg_password = /^\w{6,12}$/;
        var flag = reg_password.test(password);
        var s_password = document.getElementById("s_password");
        if(flag){
            s_password.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }

</script>

13.jQuery

就是一个封装了很多方法的javascript库

13.1jQuery入口函数

入口函数也叫页面加载完毕函数，在页面加载完成时自动执行，有两种方式，推荐使用第二种方式。一般在入口函数中写页面加载完成后要执行的jQuery代码。

第一种：

$(document).ready(function(){
    console.log(123);
});

第二种：

$(function(){
    console.log(111);
});

13.2$函数

$其实就是jQuery，当出现$ is not defined的错误时说明没有引入jQuery文件。

jQuery是一个自执行函数，执行jQuery文件也就是给window对象添加一个jQuery属性和$属性。

$参数介绍

参数传递不同，效果也不一样

1）如果参数是一个匿名函数，那么它就是一入口函数

如：$(function(){ });

2）如果参数是一个字符串，那么它是选择器或者创建标签

如：$(“input”)，这是一个选择器

如：$(“<div>哈哈哈</div>”)，这是在创建一个标签

3）如果参数是一个dom对象，那么就是将dom对象转换为jQuery对象

如：$(dom对象)

13.3jQuery对象和Dom对象

Dom对象：只能调用dom方法和属性，不能调用jQuery的属性和方法

jQuery对象：只能调用jQuery方法和属性，不能调用dom的属性和方法

dom转jQuery：直接在dom对象的前面加一个$,然后把dom对象用括号括起来即可。如$(dom对象)

jQuery转dom：

a. 使用下标取出来

var divs=$("div");//获取所有的div标签，结果集是一个数组

var div1=divs[0];//通过下标取数组中的元素,里面的每一个元素就是dom对象

b. 使用jQuery中的get(index)方法

var divs=$("div");//获取所有的div标签

var div1=divs.get(0);//通过get方法指定要获取的索引，实际上也是利用了数组的特性

开关灯案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                var buttons=document.getElementsByTagName("button");
                //点击开灯按钮，背景变白。dom对象和jQuery对象交叉使用
                $(buttons[0]).click(function(){//点击事件使用jQuery
                    //改变颜色使用原生js
                    $("body")[0].style.backgroundColor="white";
                });
                //点击关灯按钮，背景变黑
                buttons[1].onclick=function(){//点击实际使用原生js
                    //改变颜色使用jQuery
                    $("body").css("background-color","black");
                }
            });
        </script>
    </head>
    <body>
        <!--开关灯案例-->
        <!--点击开灯按钮，背景变白；点击关灯按钮，背景变黑-->
        <button>开灯</button>
        <button>关灯</button>
        <img src="../html02/banner_3.jpg" />
    </body>
</html>

14.jquery选择器

1）id选择器：$(“#id”)，找到对应id的对象

2）类名选择器：$(“.className”)，找到类名为className的对象

3）标签选择器：$(“标签名”)，找到所有一样的标签

4）兄弟选择器：$(“div,a”)，不仅可以找到div标签，还可以找到a标签

5）层级选择器

后代选择器：$(“parent child”)，先找到parent标签，再找parent里面的child标签，然后再去找child里面的child标签。（找完所有）

子代选择器：$(“parent>child”),先找到parent标签，再找parent里面的child标签,到这里就不找了。（到此停止）

6）过滤选择器

这类选择器前面都带有冒号：

1）:even获取索引为偶数的元素
2）:odd获取索引为奇数的元素
3）:eq(index) 获取指定索引的元素
4）:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
5）:selected匹配所有选中的option元素
6）:enabled匹配所有可用元素
7）:disabled匹配所有不可用元素

7）筛选选择器

parent() 查找父亲
next()查找下一个兄弟
prev()查找上一个兄弟
children()获取儿子元素
siblings()找到每个div的所有同辈元素

隔行换色案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
        <script src="../js/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>1111</td>
                <td>1111</td>
                <td>1111</td>
                <td>1111</td>
            </tr>
            <tr>
                <td>333</td>
                <td>113311</td>
                <td>11311</td>
                <td>13111</td>
            </tr>
            <tr>
                <td>333</td>
                <td>113311</td>
                <td>11311</td>
                <td>13111</td>
            </tr>
            <tr>
                <td>333</td>
                <td>113311</td>
                <td>11311</td>
                <td>13111</td>
            </tr>
            <tr>
                <td>333</td>
                <td>113311</td>
                <td>11311</td>
                <td>13111</td>
            </tr>
        </table>
        <script>
            //各行换色
            $("tr:even").css("background-color","red");
            $("tr:odd").css("background-color","blue");
        </script>
    </body>
</html>

15.jQuery属性

1）获取和设置文本 text()

获取文本：text()不给参数即可,格式：$(“选择器”).text()。获取所有的文本，包括后代的文本。

设置文本：text()给参数即可,格式：$(“选择器”).text(“设置的文本”)。会覆盖原有内容

设置和获取文本案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#get").click(function(){
                    //获取内容
                    console.log($("div").text());
                });
                $("#set").click(function(){
                    //设置内容
                    $("div").text("我是新设置的文本，我会覆盖此范围原有的所有内容");
                });
            });
        </script>
    </head>
    <body>
        <button id="get">获取文本</button>
        <button id="set">设置文本</button>
        <div>
            我是一个div
            <font>我是font标签</font>
        </div>
    </body>
</html>

2）获取和设置样式 css()

获取样式：$("xxx").css(“样式名”)，根据样式名来获取对应的样式内容

设置样式：

设置单个样式：$("xxx").css(“样式名” , ”样式”)

同时设置多个样式：$("xxx").css( { “样式名1” : ”样式1” ,“样式名2” : ”样式2” } )

获取设置样式案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#get").click(function(){
                    //获取样式
                    console.log($("#one").css("border"));
                });
                $("#set").click(function(){
                    //设置单个样式
                    $("#two").css("background-color","greenyellow");
                });
                $("#set2").click(function(){
                    //设置多个样式
                    $("#three").css({"color":"white","background-color":"black","font-size":"30px"});
                });
            });
        </script>
        <style>
            #one{
                background: aquamarine;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <button id="get">获取div1样式</button>
        <button id="set">设置单个样式</button>
        <button id="set2">设置多个样式</button>
        <div id="one">我是div1</div>
        <div id="two">我是div2</div>
        <div id="three">我是div3</div>
    </body>
</html>

3）获取和设置表单中的值 val()

获取表单中的值：val()不给参数即可,格式：$(“选择器”).val()

设置表单中的值：val()给参数即可,格式：$(“选择器”).val(“设置的值”)。

获取和设置表单中的值的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#get").click(function(){
                    console.log($("input").val());
                })
                $("#set").click(function(){
                    $("input").val("我是设置的文本内容鸭");
                });
            });
        </script>
    </head>
    <body>
        <button id="get">获取表单内容</button>
        <button id="set">设置表单内容</button>
        <input type="text"  value="我是一个文本框，嘻嘻"/>
    </body>
    </body>
</html>

4)html()获取和设置容器中的html代码

获取html代码：html()不给参数即可,格式：$(“选择器”).html()。获取所有的html代码和文本

设置html代码：html()给参数即可,格式：$(“选择器”).html(“设置的html代码”)。会覆盖原有内容

获取和设置容器中的html代码的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#get").click(function(){
                    console.log($("div").html());
                })
                $("#set").click(function(){
                    $("div").html("<b>我是设置的内容，我已经覆盖了原有内容哈</b>");
                });
            });
        </script>
    </head>
    <body>
        <button id="get">获取html内容</button>
        <button id="set">设置html内容</button>
        <div>
            哈哈哈哈哈
            <p>我是一个段落</p>
            <p><a>我是一个链接</a></p>
        </div>
    </body>
    </body>
</html>

5）attr()获取和设置以及removeAttr()删除容器的属性

获取容器的属性：attr(“属性名”)给出属性名即可,格式：$(“选择器”).attr()。如果没有这个属性，那么获取的属性是undefined。

设置容器的属性：attr()给属性名和属性值即可,格式：$(“选择器”).attr(“属性名 ” , “设置的属性值”)或$(“选择器”).attr({“属性名 ” :“设置的属性值” , “属性名 ” :“设置的属性值”})。如果存在这个属性名，就修改这个属性值；如果不存在这个属性名，就添加这个属性。

移除属性：

　　removeAttr(“属性名”) 移除单个属性

　　removeAttr(“属性名1 属性名2”)移除多个属性，属性之间用空格分隔

如果移除的属性不存在也不会报错。

获取和设置以及删除容器的属性的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#get").click(function(){
                    console.log($("input").attr("name"));
                })
                $("#set").click(function(){
                    $("input").attr("test","测试属性");
                });
                $("#set2").click(function(){
                    $("input").attr({"test":"测试属性","test2":"设定多个属性"});
                });
                $("#remove").click(function(){
                    $("input").removeAttr("test");
                });
                $("#remove2").click(function(){
                    $("input").removeAttr("test test2 attr");
                });
            });
        </script>
    </head>
    <body>
        <button id="get">获取属性</button>
        <button id="set">设置单个属性</button>
        <button id="set2">设置多个属性</button>
        <button id="remove">删除单个属性</button>
        <button id="remove2">删除多个属性</button><br>
        <input type="text" value="我是一个文本框，嘻嘻" attr="" name="hhh" id="mytext"/>
    </body>
    </body>
</html>

6）prop()操作布尔类型的属性

在jQuery1.6之后,对于checked,selected,disabled这类布尔类型的属性来说，不能使用attr方法，要使用prop方法。使用如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("button").click(function (){
                    alert($("input").prop("checked"));
                });
            });
        </script>
    </head>
    <body>
        <button>查看多选框是否选中</button>
        <input type="checkbox"/>
    </body>
</html>

全选/全不选案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#check").click(function(){//满足需求1
                    //全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
                    var checkStauts=$("#check").prop("checked");
                    $("#tb input").prop("checked",checkStauts);
                    //通过全选按钮的选中与为选中来设置其他按钮的状态
//                    if($("#check").prop("checked")){
//                        $("input").prop("checked",true);
//                    }else{
//                        $("input").prop("checked",false);
//                    }
                });
                $("#tb input").click(function(){//满足需求2
                    //获取下面所有多选框的个数
                    var numbers=$("#tb input").length;
                    //获取下面被选中的多选框的个数
                    var numberSelected=$("#tb input:checked").length;
                    //判断两个个数是否相等，相等就改变上面的那个多选框状态
//                    if(numbers==numberSelected){
//                        $("#check").prop("checked",true);
//                    }else{
//                        $("#check").prop("checked",false);
//                    }
                    //代码优化
                    $("#check").prop("checked",numbers==numberSelected);
                });
            });
        </script>
    </head>
    <body>
        <!--全选/全不选-->
        <!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
            需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。-->
        <table align="center" cellpadding="0" cellspacing="0" border="1px">
            <tr>
                <th><input type="checkbox" id="check"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>0</td>
                    <td>手机数码</td>
                    <td>手机数码类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>电脑办公</td>
                    <td>电脑办公类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>鞋靴箱包</td>
                    <td>鞋靴箱包类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>家居饰品</td>
                    <td>家居饰品类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

数组遍历和this案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    </head>
    <body>
        <input onblur="hhh(this)"/>
        <input onblur="hhh(this)"/>
        <script>
            //jQuery中this用法
            //this是js对象，使用时需要转成jQuery对象，谁使用就指向谁
            $(function(){
                $("input").blur(function(){
                    console.log($(this).val());
                });
            });
            
            //js中this用法
            //需要给一个参数，谁使用就指向谁
            function hhh(input){
                console.log(input.value);
            };
            var arr=[1,2,3,4];
            //js中数组的遍历
            arr.forEach(function(obj){
                console.log(obj);
            });
            
            //jQuery中数组的遍历
            $(arr).each(function(i,obj){
                console.log(obj);
            });
            
        </script>
    </body>
</html>

7）jQuery尺寸和位置操作

height()和width()方法获取和设置高度宽度，不包括内边距边框和外边距
innerWdith()和innerHeight()返回元素的宽度和高度，包括内边距
outerHeight()和返回值:IntegerouterWidt()返回元素外部宽度，包括内边距和边框
outerHeight(true)和返回值:IntegerouterWidt(true)返回元素外部宽度，包括内、外边距和边框
offset()获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效
position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left
scrollTop() 获取匹配元素相对滚动条顶部的偏移（元素内容被卷曲出去的高度）。此方法对可见和隐藏元素均有效
scrollLeft() 获取匹配元素相对滚动条左侧的偏移（元素内容被卷曲出去的宽度）。此方法对可见和隐藏元素均有效

16.jQuery事件监听

页面加载完成事件：$(function (){});

单击事件：click(function(){})

双击事件：dblclick(function(){})

鼠标移入事件：mouseover(function(){}) 、mouseenter(function(){})

鼠标移出事件：mouseout(function(){})、mouseleave(function(){})

获得焦点事件：focus(function(){})

失去焦点事件：blur(function(){})

触发事件：trigger(“事件类型”)，当某一事件发生时触发。如$(“xxx”).trigger(“click”)当条件满足时触发单击事件。
注册任意监听：on(“监听类型”,function(){ })，包括简单注册和委托注册，简单注册不能动态注册，而委托注册可以动态注册。
off()解绑注册事件。不给参数就解绑所有的注册事件，给参数就解绑指定的注册事件。
一次性监听：one(“监听类型”,function(){ })
mouseover/mouseout在鼠标移动或离开到选取的元素或者子元素上时触发
mouseenter/mouseleave只在鼠标移动或离开到选取的元素上时触发

下拉菜单案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //设置li横向显示
                $("#one>li").css("float","left");
                //鼠标点击一次显示，再点击一次不显示
                var i=0;
                $("#one>li").click(function(){
                    i++;
                    if(i%2==1){
                        $(this).children("ul").show();
                    }else{
                        $(this).children("ul").hide();
                    }
                });
                //获取鼠标移入事件
                $("#one>li>ul>li").mouseover(function(){
                    $(this).children().css("background","red");
                });
                //获取鼠标移出事件
                $("#one>li>ul>li").mouseout(function(){
                    $(this).children().css("background","white");
                });
                
            });
        </script>
        <style>
            *{
                padding:0; 
                margin:0;
            }
            div{
                margin-left: 200px;
                margin-top: 100px;
            }
            ul{
                list-style:none;    
            }
            #one li{
                background:white;
            }
            a{
                text-decoration: none;
                background: aquamarine;
                margin: 10px;
            }
            #one li ul{
                display: none;
                
            }
            #one li ul li a{
                background:white;
            }
            /*#one li ul li{
                background:bisque;
            }*/
            
        </style>
    </head>
    <body>
        <!--下拉菜单案例-->
        <!--当鼠标点击一级菜单时显示二级菜单，鼠标再次点击时隐藏二级菜单。鼠标移动到二级菜单时改变鼠标位置的颜色-->
        <div>
            <ul id="one">
                <li>
                    <a href="#">常用链接</a>
                    <ul>
                        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
                        <li><a href="#">二级菜单2</a></li>
                        <li><a href="#">二级菜单3</a></li>
                        <li><a href="#">二级菜单4</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">一级菜单2</a>
                    <ul>
                        <li><a href="#">二级菜单5</a></li>
                        <li><a href="#">二级菜单6</a></li>
                        <li><a href="#">二级菜单7</a></li>
                        <li><a href="#">二级菜单8</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">一级菜单3</a>
                    <ul>
                        <li><a href="#">二级菜单9</a></li>
                        <li><a href="#">二级菜单10</a></li>
                        <li><a href="#">二级菜单11</a></li>
                        <li><a href="#">二级菜单12</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

View Code

图片突出显示案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("img").mouseenter(function(){
                    $(this).css("opacity","1").siblings("img").css("opacity","0.4");
                });
                $("div").mouseleave(function(){
                    $("img").css("opacity","1");
                })
                $("div").mouseenter(function(){
                    $("img").css("opacity","0.4");
                })
            });
        </script>
        <style>
            body{
                background: blue;
            }
            div{
                width: 610px;
                margin-top:100px;
                margin-left: 300px;
                background: white;
            }
            img{
                width: 200px;
                height: 200px;
                opacity: 0.4;
            }
        </style>
    </head>
    <body>
        <!--图片突出显示案例-->
        <!--当鼠标移入到某一图片时，透明度为1，其他图片的透明度为0.4-->
        <!--当鼠标离开大盒子时，所有图片透明度为1-->
        <div>
            <img src="../img/1.jpg" >
            <img src="../img/2.jpg" >
            <img src="../img/3.jpg" >
            <img src="../img/4.jpg" >
            <img src="../img/5.jpg" >
            <img src="../img/6.jpg" >
        </div>
    </body>
</html>

View Code

QQ好友列表案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("span").click(function(){
                    $(this).siblings().show().parent().siblings('li').children('div').hide();
                    //this代表的是span,通过siblings可以知道他的兄弟div,然后让其显示
                    //parent是找到span的父亲li,siblings('li')是找到li的其他兄弟节点
                    //children('div')可以找到其他li的兄弟节点的孩子，然后让其隐藏
                });
            });
        </script>
        <style>
            ul{
                list-style: none;
            }
            li{
                border: 1px solid darkgrey;
                width: 260px;
                background-color: royalblue;
            }
            div{
                height: 200px;
            }
            li div{
                display: none;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <!--QQ好友列表案例-->
        <!--当鼠标某一个分组时，显示这个分组的好友列表，其他的分组好友列表-->
        <div>
            <ul>
                <li>
                    <span>分组一</span>
                    <div>我是分组一的好友列表</div>
                </li>
                <li>
                    <span>分组二</span>
                    <div>我是分组二的好友列表</div>
                </li>
                <li>
                    <span>分组三</span>
                    <div>我是分组三的好友列表</div>
                </li>
                <li>
                    <span>分组四</span>
                    <div>我是分组四的好友列表</div>
                </li>
            </ul>
        </div>
    </body>
</html>

View Code

事件对象

注册一个事件，系统会生成一个对象记录这个事件触发时的一些信息，用事件参数e来获取。

按键改变颜色案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var id=$("#change");
                var span=$("#keyCode");
                $(document).on("keydown",function(e){
                    switch(e.keyCode){
                        case 82:id.css("background","red");span.text(82);break;
                        case 71:id.css("background","green");span.text(71);break;
                        case 66:id.css("background","blue");span.text(66);break;
                        case 80:id.css("background","purple");span.text(80);break;
                        case 89:id.css("background","yellow");span.text(89);break;
                        default:id.css("background","pink");span.text("查无此键");break;
                    }
                    
                });
            });
        </script>
        <style>
            #div{
                margin-top: 100px;
                text-align: center;
            }
            #change{
                background: burlywood;
                width: 300px;
                height: 200px;
                margin-left: 518px;
                font-size: 26px;
            }
        </style>
    </head>
    <body>
        <div id="div">
            <h2>按钮改变颜色</h2>
            <div id="change"><br><br>
                keyCode是：<span id="keyCode"></span>    
            </div>
        </div>
    </body>
</html>

View Code

17. jQuery内容操作

append(“内容”)：朝容器最后面添加内容

appendTo(“要添加到的容器”): 谁添加到哪去

after(“内容”)：添加内容到兄弟节点的后面

before(“内容”)：添加内容到兄弟节点的前面

remove()：删除自己

empty()：清空子节点自己还在

parent ():获取父元素

clone()：后代节点的克隆，只存在于内存中，要使用就要追加。里面的参数为true会克隆事件，false则不克隆事件，如果不写参数默认是false.

数据增删案例1（onclick）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            var td="<td><a href='#' onclick='del(this)'>删除</a>";
            $(function(){
                $("#button").click(function(){
                    var id=document.getElementById("id").value;
                    var name=document.getElementById("name").value;
                    var score=document.getElementById("score").value;
                    $("table").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+score+
                    "</td>"+td);
                });
                
            });
            function del(d){
                    $(d).parent().parent().remove();
                }
        </script>
        <style>
            body{
                text-align: center;
            }
            table{
                text-align: center;
            }
            th{
                width:150px;
            }
        </style>
    </head>
    <body><br>
        
        <form >
            输入学生信息：
            <input type="text" name="id" id="id" placeholder="编号">
            <input type="text" name="name" id="name" placeholder="姓名">
            <input type="text" name="score" id="score" placeholder="分数">
            <input type="button" value="添加" id="button">
        </form><br><hr>
        <h3>学生信息</h3>
        <table align="center" cellpadding="0" cellspacing="0" border="1px solid #EAEAEA">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
        </table>
    </body>
</html>

View Code

数据增删案例2（on的委托方式注册）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery增删小案例修改版</title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            var td="<td><a href='#' class='del'>删除</a>";
            $(function(){
                $("#button").click(function(){
                    var id=document.getElementById("id").value;
                    var name=document.getElementById("name").value;
                    var score=document.getElementById("score").value;
                    $("#tb").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+score+
                    "</td>"+td);
                    $(".input").val("");//清空输入框
                });
                //使用on委托注册删除
                $("tbody").on("click",'.del',function(){
                    $(this).parent().parent().remove();
                })
                
            });
            
        </script>
        <style>
            body{
                text-align: center;
            }
            table{
                text-align: center;
            }
            th{
                width:150px;
            }
        </style>
    </head>
    <body><br>
        
        <form >
            输入学生信息：
            <input type="text" name="id" id="id" class="input" placeholder="编号">
            <input type="text" name="name" id="name" class="input" placeholder="姓名">
            <input type="text" name="score" id="score" class="input" placeholder="分数">
            <input type="button" value="添加" id="button">
        </form><br><hr>
        <h3>学生信息</h3>
        <table align="center" cellpadding="0" cellspacing="0" border="1px solid #EAEAEA">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
            <tbody id="tb"></tbody>
        </table>
    </body>
</html>

View Code

18. jQuery动画

显示和隐藏、上拉隐藏和下拉显示、淡入和淡出案例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script>
        var i = 0;
        $(function() {
            $("button").click(function() {
                i++;
                if(i % 2 == 1) {
                    $("img").hide();//隐藏
                    $("img").slideUp();//上拉隐藏
                    $("img").fadeOut(); //淡出
                } else {
                    $("img").show();//显示
                    $("img").slideDown();//下拉显示
                    $("img").fadeIn(); //淡入
                  //slideToggle()//切换：如果是隐藏状态那么会划入，如果是显示状态那么会划出
                }
            });
            //自定义动画            
$("button").click(function() {
                $("img").animate({top:"100px",left:"200px",width:"1000px"})
            });
        });
    </script>
    <style>
        img{
            position: absolute;
        }
    </style>
    <body>
        <!--动画-->
        <button>按钮</button>
        <img src="../html02/banner_3.jpg"  width="300px"/>
    </body>

</html>

View Code

动画队列的停止与开始案例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script>
        var i = 0;
        $(function() {
            $("#start").click(function() {
                $("img").slideDown(2000).slideUp(2000);
            });
            $("#stop").click(function() {
                //stop(a,b)中两个参数的含义
                //a：是否清除队列
                //b:是否跳转到最终效果
                $("img").stop(true,false);//点击停止就会停留在当前动画状态
             //如果stop()不写参数，默认参数都是false
            });
        });
    </script>
    <style>
        img{
            position: absolute;
            display: none;
        }
    </style>
    <body>
        <!--动画队列的停止与开始案例-->
        <button id="start">开始动画</button>
        <button id="stop">停止动画</button><br>
        <img src="../html02/banner_3.jpg"  width="1000px"/>
    </body>

</html>

View Code

19.JQuery练习

全选与全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#check").click(function(){//满足需求1
                    //全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
                    var checkStauts=$("#check").prop("checked");
                    $("#tb input").prop("checked",checkStauts);
                    //通过全选按钮的选中与为选中来设置其他按钮的状态
//                    if($("#check").prop("checked")){
//                        $("input").prop("checked",true);
//                    }else{
//                        $("input").prop("checked",false);
//                    }
                });
                $("#tb input").click(function(){//满足需求2
                    //获取下面所有多选框的个数
                    var numbers=$("#tb input:checkbox").length;
                    //获取下面被选中的多选框的个数
                    var numberSelected=$("#tb input:checked").length;
                    //判断两个个数是否相等，相等就改变上面的那个多选框状态
//                    if(numbers==numberSelected){
//                        $("#check").prop("checked",true);
//                    }else{
//                        $("#check").prop("checked",false);
//                    }
                    //代码优化
                    $("#check").prop("checked",numbers==numberSelected);
                });
            });
        </script>
    </head>
    <body>
        <!--全选/全不选-->
        <!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
            需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。-->
        <table align="center" cellpadding="0" cellspacing="0" border="1px">
            <tr>
                <th><input type="checkbox" id="check"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>0</td>
                    <td>手机数码</td>
                    <td>手机数码类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>电脑办公</td>
                    <td>电脑办公类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>鞋靴箱包</td>
                    <td>鞋靴箱包类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>家居饰品</td>
                    <td>家居饰品类商品</td>
                    <td><a href="">修改</a>|<a href="">删除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

View Code

添加表情包

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            $(function(){
                $("img").click(function(){
                    //clone()克隆，原因是添加表情时原数据会减少
                    $("#font").append($(this).clone());
                    console.log($(this).attr("src"));
                });
            });
        </script>
        <style>
            div{
                margin-left: 50px;
            }
            #image{
                margin-top: 50px;
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div id="image">
            <img src="01.gif">
            <img src="02.gif">
            <img src="03.gif">
            <img src="04.gif">
            <img src="05.gif">
            <img src="06.gif">
            <img src="07.gif">
            <img src="08.gif">
            <img src="09.gif">
            <img src="10.gif">
            <img src="11.gif">
            <img src="12.gif">
        </div>
        <div id="font">
            <font>请选择表情包：</font>
        </div>
    </body>
</html>

View Code

左移右移

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //多选移动
                $("#rightBtu").click(function() {
                    $("#right").append($("#left>option:selected"))
                });
                $("#leftBtu").click(function() {
                    $("#left").append($("#right>option:selected"))
                });
                //双击移动
                $("option").dblclick(function() {
                    if($(this).parent().attr("id") == "left") {
                        $("#right").append($(this))
                    }else{
                        $("#left").append($(this))
                    }
                    });
                
            });
        </script>
        <style>
            body {
                text-align: center;
                margin-top: 100px;
                margin-left: 100px;
            }
            
            select {
                width: 150px;
                height: 300px;
            }
            
            div {
                width: 200px;
                height: 500px;
                float: left;
            }
            button{
                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <div>
            <!--展开下拉列表-->
            <select multiple="multiple" id="left">
                <option>钟玉石</option>
                <option>方启豪</option>
                <option>汤鹏程</option>
            </select>
        </div>
        <div id="button">
            <button id="rightBtu">--></button><br>
            <button id="leftBtu"><--</button>
        </div>
        <div>
            <select multiple="multiple" id="right">
                <option>张林</option>
                <option>冷宗阳</option>
                <option>哈哈哈</option>
            </select>
        </div>
    </body>

</html>

View Code

省市联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script>
            var cities = [
                ["长春市","吉林市","延边市","白山市","松原市"],
                ["济南市","青岛市","临沂市","烟台市"],
                ["石家庄","唐山","保定","承德","秦皇岛"],
                ["南京","苏州","扬州","无锡"],
                ["十堰","襄阳","武汉","随州"]
            ];
            var province = ["请选择省","吉林","山东","河北","浙江","湖北"];
            $(function(){
                //添加省份
                $(province).each(function(i,val){
                    $("#one").append("<option>"+val+"</option>")
                });
                //当省份改变时添加城市
                $("#one").change(function(){
                    //清空城市的元素
                    $("#two").html("<option>请选择市</option>");
                    //selectedIndex获取选中的option的索引
                    var index=this.selectedIndex;
                    if(index>0){//去除省份中索引为0的选择
                        cities[index-1].forEach(function(city){
                            $("#two").append("<option>"+city+"</option>")
                        });
                    }
                });
            });    
        </script>
    </head>
    <body>
        <select id="one"></select>
        <select id="two">
            <option>请选择市</option>
        </select>
    </body>
</html>

View Code

多选框删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击多选框删除</title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#check").click(function(){//满足需求1
                    //全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
                    var checkStauts=$("#check").prop("checked");
                    $("#tb input").prop("checked",checkStauts);
                });
                $("#tb input").click(function(){//满足需求2
                    //获取下面所有多选框的个数
                    var numbers=$("#tb input:checkbox").length;
                    //获取下面被选中的多选框的个数
                    var numberSelected=$("#tb input:checked").length;
                    $("#check").prop("checked",numbers==numberSelected);
                });
                $(".del").click(function(){
                    $(this).parent().parent().remove();
                });
                $("button").click(function(){
                    //多选删除
                    $("#tb input:checked").parent().parent().remove();
                });
                
            });
        </script>
    </head>
    <body>
        <!--点击多选框删除-->
        <!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
            需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。
            需求3：只有选择了多选框，点击多选删除才能删除；直接点击删除可以删除对应的单个信息-->
        <table align="center" cellpadding="0" cellspacing="0" border="1px">
            <tr>
                <th><input type="checkbox" id="check"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>0</td>
                    <td>手机数码</td>
                    <td>手机数码类商品</td>
                    <td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>电脑办公</td>
                    <td>电脑办公类商品</td>
                    <td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>鞋靴箱包</td>
                    <td>鞋靴箱包类商品</td>
                    <td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>家居饰品</td>
                    <td>家居饰品类商品</td>
                    <td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
                </tr>
                <tr><td colspan="6"><button>多选删除</button></td></tr>
            </tbody>
        </table>
    </body>
</html>

View Code

posted @ 2019-11-03 20:36 钟小嘿阅读(392) 评论(0) 编辑收藏举报

刷新页面返回顶部

笨兮兮

Js和JQuery基础

1.JavaScript的组成

2.JavaScript变量

3.JavaScript数据类型

3.1基本数据类型

3.2引用数据类型

4.运算符

5.正则对象

5.1 RegExp对象的创建方式

5.2test方法

6.JS数组对象

6.1JS数组的特性

6.2JS数组的四种创建方式

7.全局函数（global）

8.自定义函数/自定义方法

9.BOM对象

9.1消息框

9.2定时器

9.3location对象

10.DOM对象

10.1获取元素对象的四种方式

10.2元素对象常见属性

11.JS事件

11.1常见的js事件

11.2JS事件的两种绑定方式

12.JS练习题

12.1点击改变灯泡的颜色

12.2轮播图

12.3页面自动跳转

12.4表单验证的js代码

13.jQuery

13.1jQuery入口函数

13.2$函数

$参数介绍

13.3jQuery对象和Dom对象

14.jquery选择器

15.jQuery属性

16.jQuery事件监听

事件对象

17. jQuery内容操作

18. jQuery动画

19.JQuery练习

公告