1. 什么是 jQuery

JQuery：Javascript+Query,使用 JavaScript 编写的 js 库,提高开发的效率

2. jQuery 特点

1. 轻量级框架：write less,do more 写的少,做的多。
2. 应用广泛。
3. 免费开源,文档丰富。
4. 可以辅助编写众多的第三方库。

3. 入门程序

步骤:
1. 引入 jquery.js
2. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jQuery -->
    <script src=js/jquery-1.9.1.js></script>
    <script>
        /*
            jQuery或者$    表示jQuery对象
            $（document）  把document的dom对象转化成jQuery对象
            ready函数      表示等待页面加载html等元素加载完成，会执行传入ready函数参数 匿名函数
        */
        $(document).ready(function () {
            //弹出框
            alert("Hello World,jQuery!")
        });
    </script>
</head>
<body>
</body>
</html>

4. JQuery 语法

4.1.语法

$(“选择器”).action()

4.2.说明

$:核心函数
选择器:JQuery 查找网页元素的表达式,返回的是 jquery 对象
action:jquery 内置函数,实现特定的功能

4.3.核心函数的功能

1. 获取 dom 对象
2. 创建 dom 对象
3. 克隆 dom 对象

5. 什么是 Jquery 对象

使用 jQuery 封装的 Dom 对象叫做 jQuery 对象

6. 使用 jQuery 对象的优缺点：

  • 优点：jQuery 的扩展属性和函数在底层判断了浏览器以及版本实现了浏览器的兼容。
  • 缺点：jQuery 扩展的函数只能实现基本的 dom 操作，但是对于元素独有的 htmldom 接口。
  • 封装很少(例如 input、select())，对于 html5 新增的 DOM 方法也不支持，如果想实现类似功能，只能使用 dom 接口。
  • 结论：为保证兼容性尽量使用 jQuery 对象的 API，但特殊功能也需要使用原生 dom 接口。

7. 编码习惯

如果获取的是 jQuery 对象,那么要在变量前面加上$。

  • var $variable=jQuery 对象
  • var variable=DOM 对象

8. DOM 转 Jquery 对象

8.1.语法

var $jquery 变量=$(dom 对象);

8.2.案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 引入jQuery的库 -->
        <script src=js/jquery-1.9.1.js></script>
        <script>
            //使用js给div赋值--原生的dom操作 
            function dian() {
                //1.得到div的dom对象
                var domDiv = document.getElementById("myDiv");
                //2.赋值（div对象设置html内容）
                domDiv.innerHTML = "我是div的内容";
            }

            //使用jquery给div赋值--把dom对象转换jQuery的操作
            function dian1() {
                var domDiv = document.getElementById("myDiv");
                //1、得到div的jQuery对象--把document的dom对象转化为jQuery对象
                var $div = $(domDiv);
                //2、赋值（jQuery对象的html函数设置html内容）
                $div.html("我是Jquery的div 的内容");
            }
        </script>
    </head>
    <body>
        <div id="myDiv"></div>
        <input type="button" value="点我" onclick="dian()">
        <input type="button" value="点我(jQuery)" onclick="dian1()">
    </body>
</html>

9. JQuery 转 Dom 对象

9.1.语法

1. jquery 对象[index]
2. jquery 对象.get(index)

9.2.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jQuery的库 -->
    <script src=js/jquery-1.9.1.js></script>
    <script>
        function dian() {
            //1.得到div的jquery对象
            var $div = $("#myDiv");
            //打印jQuery对象
            console.log($div);
            /*2.
                使用 jquery 对象[index]
                使用 jquery 对象.get(index)
            */
            //var domDiv = $div[0];
            var domDiv = $div.get(0);
            //dir方法会显示DOM对象的所有属性
            console.dir(domDiv);
            //3.赋值（设置html内容）
            domDiv.innerHTML = "我是div的内容";
        }
    </script>
</head>
<body>
<div id="myDiv"></div>
<input type="button" value="点我" onclick="dian()">
</body>
</html>

10. 什么是 jQuery 选择器

用于获取 jQuery 对象的表达式

11. jQuery 选择器的基本语法

$(“选择器表达式”)

12. 基本选择器

1、基本选择器

  jQuery中最常用的选择器，通过元素的id，引用的样式类名、标签名、通配符来查找DOM元素。

  • id选择器:选择一个具有指定id属性的单个元素。
    • 示例:$(“#ID”);
  • 元素选择器:参数为html标签名，返回当前网页的该标签对应的jQuery对象。
    • 示例: $ (“div”) ;
  • 类选择器:参数为css的样式类名，返回使用当前样式类渲染的全部元素对应的jQuery对象。
    • 示例:$(“.myClass”);
  • 通配符选择器:匹配所有元素对应的jQuery对象。
    • 示例:$(“*”) ; 

2、组合(合并)选择器

  • 语法：$(选择器 1,选择器 2,选择器 3,…) 或的关系(合并)

12.1. id 选择器

$(“#id”)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 引入jQuery的库 -->
        <script src=js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                //通过id选择器获取div对象 -> 设置css函数
                $("#myDiv").css("background", "red");
            }
        </script>
    </head>
    <body>
        <div id="myDiv">我是div</div>
        <input type="button" value="点我" onclick="dian()">
    </body>
</html>

12.2. 元素选择器

$(“元素名”)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 引入jQuery的库 -->
        <script src=js/jquery-1.9.1.js></script>
        <script>
            //通过元素名称选择器获取div对象,css函数给jQuery的对象设置或者获取样式
            //jQuery选择器对象操作，有隐式迭代效果（遍历内部DOM元素(伪数组形式储存)的过程就叫做隐式迭代。）
            function dian() {
                $("div").css("background", "LightPink");
            }
        </script>
    </head>
    <body>
        <div id>我是div1</div>
        <div id>我是div2</div>
        <div id>我是div3</div>
        <p>我是p</p>
        <span>我是span</span>
        <input type="button" value="点我" onclick="dian()">
    </body>
</html>

12.3. 类选择器

$(“.类名”)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- jQuery -->
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                //类选择器
                $(".my").css("background", "violet")
            }
        </script>
    </head>
    <body>
        <div class="my">我是div</div>
        <p class="my">我是p</p>
        <span>我是span</span>
        <input type="button" value="点我" onclick="dian()">
    </body>
</html>

12.4. 通配符选择器

$(“*”)匹配所有的元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- jQuery -->
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                //通配符*选择器
                $("*").css("background", "yellow")
            }
        </script>
    </head>
    <body>
        <div class="my">我是div</div>
        <p class="my">我是p</p>
        <span>我是span</span>
        <input type="button" value="点我" onclick="dian()">
    </body>
</html>

 

12.5. 组合(合并)选择器

语法:
$(“选择器 1,选择器 2,选择器 3,…”) 或的关系(合并) 将每一个选择器匹配到的元素合并后一起返回。

可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- jQuery -->
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                /*
                    组合, 用逗号分隔
                    div.myDiv1 保证首先是div标签，再找class="myDiv"
                */
                $("div.myDiv,p,span").css("background", "LightBLue")
            }
        </script>
    </head>
    <body>
        <div class="myDiv">我是div1</div>
        <div>我是div2</div>
        <p>我是p</p>
        <span>我是span</span>
        <input type="text">
        <input type="button" value="点我" onclick="dian()">
    </body>
</html>

13. 属性选择器

13.1. 定义

通过元素的属性获取相应的元素

13.2. 分类

  • [attribute]：匹配包含指定属性的元素。
    • $(“div[id]”) 获取所有具有id值的div对象。
  • [attribute=value]：匹配给定的属性是某个特定值的元素。
    • $(“input[name= ‘userName’]“) 获取name取值为userName的输入框。
  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    • $(“input [name!= ‘userName’]“)  获取name取值为非userName或不具备name属性的输入框。
  • [attribute ^=value]：匹配给定的属性是以某些值开始的元素
    • $(“input [name^= ‘news’]”)  获取name取值以news开头的输入框。
  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素。
    • $(“input[name$= ‘end’]”)  获取name取值以end结尾的输入框。
  • [attribute*=value]：匹配给定的属性是以包含某些值的元素。
    • $(“input[name*= ‘con’]”)  获取name取值包含con的输入框。
  • [attributeFilter1][attributeFilterN]：组合使用。复合属性选择器。
    • $(“input[id][nama$= ‘man’]”) 获取具有id属性，name取值以man结尾的输入框。
    • [selector1][selector2][selector3]… 复合属性选择器，需要同时满足多个条件时使用
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- jQuery -->
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                $("div[id]").css("background", "LightBLue")
            }
            function dian1() {
                $("input[name='newsletter']").attr("checked", true);
            }
            function dian2() {
                $("input[name!='newsletter']").prop("checked", true);
            }
            function dian3() {
                $("input[name!='newsletter']").prop("checked", false);
            }
            function dian4() {
                $("input[name='newsletter']").attr("checked", false);
            }
            function dian5() {
                $("input[name^='news']").prop("checked", true);
            }
            function dian6() {
                $("input[name$='letter']").prop("checked", true);
            }
            function dian7() {
                $("input[name*='a']").prop("checked", true);
            }
            function dian8() {
                $("input[name='accept'][class='hzw']").prop("checked", true);
            }
        </script>
    </head>
    <body>
        <div id>我是div1</div>
        <div id="div2">我是div2</div>
        <div>我是di3</div>
        爱好：<br>
        <input type="checkbox" name="newsletter">爬山(name="newsletter")
        <input type="checkbox" name="newsletter">骑行(name="newsletter")
        <input type="checkbox" name="accept">看海贼王(name="accept")<br>
        <input type="checkbox" name="accept" class="hzw">看海贼王(name="accept" class="hzw")
        <input type="checkbox" name="carat">看SEVENTEEN(name="carat")<br>

        <input type="button" value="选择有id的" onclick="dian()"><br>
        <input type="button" value="选择newsletter的（attr）" onclick="dian1()">&nbsp;&nbsp;&nbsp;
        <input type="button" value="取消选择为newsletter的(attr)" onclick="dian4()"><br>
        <input type="button" value="选择不为newsletter的(prop)" onclick="dian2()">&nbsp;
        <input type="button" value="取消选择不为newsletter的(prop)" onclick="dian3()"><br>
        <input type="button" value="选择以news开头的(prop)" onclick="dian5()">&nbsp;&nbsp;&nbsp;
        <input type="button" value="选择以letter结尾的(prop)" onclick="dian6()"><br>
        <input type="button" value="选择包含a的(prop)checkbox" onclick="dian7()">&nbsp;
        <input type="button" value="选择为accept且class为hzw的(prop)" onclick="dian8()"><br>
    </body>
</html>

注意：attr，prop

  • attr：初始状态复选框没有选，点击按钮调用d方法，实现了选择，然后点击attr不选按钮，实现了不选，然后再次点击attr选择按钮，结果却没有选择，再反复点击没有任何反应。
  • 解决方法：设置checked属性时，优先使用prop函数(较稳定)。

14. 层次选择器：

通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等。

  • parent child：匹配的parent选择器选择的元素下符合child选择器的后代元素（所有子孙）。
    • $ (“form input”） 获取form表单下所有input标签。
  • parent > child：匹配的parent选择器选择的元素下所有符合child选择器的直接后代元素。
    • $ (“form>input”） 获取form表单下直接子节点input标签。
  • prev + next：匹配符合prev选择器的元素后的下一个匹配next选择器的元素（同级兄弟）。
    • $(“label+input”) 获取label标签的下一个input标签的dom元素。
  • prev~siblings:匹配prev元素之后的所有 siblings 元素。
    • $(“label~input”) 获取label标签后的所有input。

14.1. 后代选择器

使用空格,在给定的祖先元素下匹配所有的后代元素

14.2. 子元素选择器

使用>,在给定的父元素下匹配所有的子元素

14.3. 相邻元素选择器

使用+隔开, 匹配所有紧接在 prev 元素后的 next 元素(如果有,是一个元素)

14.4. 匹配 prev 元素之后的所有 siblings 元素

prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                $("form input").css("background", "red")
            }
            function dian1() {
                $("form>input").css("background", "yellow")
            }
            function dian2() {
                $("label+input").css("background", "green")
            }
            function dian3() {
                $("label~input").css("background", "orange")
            }
        </script>
    </head>
    <body>
        <form>
            <input name="mmm" value="mmm">
            <label>Name:</label>
            <input name="name" value="name">
            <input name="abc" value="abc">
            <fieldset>
                <label>news</label>
                <input name="news" value="news">
            </fieldset>
        </form>
        <input name="none" value="none"><br>
        <input type="button" value="form的所有后代input变红" onclick="dian()"><br>
        <input type="button" value="form的所有子元素input变黄" onclick="dian1()"><br>
        <input type="button" value="紧邻label的input变绿" onclick="dian2()"><br>
        <input type="button" value="label后面兄弟的input变橙" onclick="dian3()"><br>
    </body>
</html>

15. 基础过滤选择器

  • :first：匹配找到的第一个元素。示例:$(“li:first”)
  • :last ：匹配找到的最后一个元素。示例:$(“li: last”)
  • :not(selector)：在返回集合清除不匹配指定选择器的元素。示例:$(“input:not(:checked)”)
  • :even ：匹配返回结果集合中索引值为偶数的元素。示例:$(“li:even”)
  • :odd ：匹配返回结果集合中索引值为基数的元素。示例:$(“li: odd”)
  • :eq(index)：匹配返回结果集中第index位置的元素。示例:$(“li:eq(0)”)
  • :gt(index) ：匹配所有大于指定索引值的元素。示例:$(“li:gt(0)”)
  • :lt(index)：匹配所有小于指定索引值的元素。示例:$(“li:lt(2)”)
  • :header(固定写法)：匹配h1-h6的标题元素。示例:$(“:header”)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            window.onload = function () {
                $("#left").css("float", "left");
                $("#left").css("margin-top", "25px");
                $("#right").css("margin-left", "120px");
                $("#right").css("float", "left");
            }
            function dian() {$("li:first").css("background", "red")}
            function dian1() {$("li:last").css("background", "blue")}
            function dian2() {$("li:not(:last)").css("background", "violet") }
            function dian3() {$("li:even").css("background", "orange")}
            function dian6() {$("li:odd").css("background", "cyan") }
            function dian4() {$("li:eq(1)").css("background", "yellow")}
            function dian5() {$(":header").css("background", "LightGreen") }
            function dian7() {$("li:gt(2)").css("background", "pink")}
            function dian8() {$("li:lt(2)").css("background", "GreenYellow")}
        </script>
    </head>
    <body>
        <div id="left">
            <ul>
                <li>我是li1</li><li>我是li2</li><li>我是li3</li>
                <li>我是li4</li> <li>我是li5</li><li>我是li6</li>
            </ul>
            <input type="button" value="第一个li变红" onclick="dian()">&nbsp;
            <input type="button" value="最后一个li变蓝" onclick="dian1()"><br>
            <input type="button" value="不是最后一个的li变紫罗兰" onclick="dian2()"><br>
            <input type="button" value="索引为偶数的li变橙" onclick="dian3()"><br>
            <input type="button" value="索引为奇数的li变青" onclick="dian6()"><br>
            <input type="button" value="指定索引为1的li变黄" onclick="dian4()"><br>
            <input type="button" value="索引大于2的li变粉" onclick="dian7()"><br>
            <input type="button" value="索引小于2的li变绿黄" onclick="dian8()"><br>
        </div>
        <div id="right">
            <h1>我是h1</h1><h2>我是h2</h2><h3>我是h3</h3>
            <h4>我是h4</h4><h5>我是h5</h5><h6>我是h6</h6>
            <input type="button" value="h1~h6变绿" onclick="dian5()"><br>
        </div>
    </body>
</html>

16. 子元素过滤选择器

  • :nth-child(index/even/odd/equation)：
    • 匹配选中元素是父元素的第（index)/基数/偶数/3n个元素。
    • :nth-child 从 1 开始的，而:eq()是从 0 算起的！
    • :eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。
    • 示例：$(“ul li:nth-child(3n+2)”)
  • :nth-last-child(index/even/odd/equation)：
    • 匹配选中元素是父元素的倒数第（index）)/基数/偶数/3n个元素。
    • 示例：$(“ul li :nth-last-child(2)”)
  • :first-child :
    • 匹配选中元素是父元素的第一个子元素。
    • 示例：$(“ul li:first-child”)
  •  :last-child :
    • 匹配选中元素是父元素的最后一个子元素。
    • 示例：$(“ul li:last-child”)
  •  :only-child :
    • 匹配选中元素是父元素的唯一子元素，如当前元素有兄弟节点，将被过滤掉。
    • 示例：$(“ul li :only-child”)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            //不重要的css：window.onload = function () {$("#myDiv").css("margin-top", "20px");$("#father").css("height", "100px");$("#left").css("float", "left");$("#right").css("margin-left", "20px");$("#right").css("float", "left");$("#right1").css("margin-left", "20px");$("#right1").css("float", "left");}
            function dian() {$("ul li:nth-child(2)").css("background", "red")}
            function dian1() {$("ul li:nth-child(even)").css("background", "orange")}
            function dian2() {$("ul li:nth-child(odd)").css("background", "yellow")}
            function dian3() {$("ul li:nth-child(3n+2)").css("background", "green") }
            function dian4() {$("ul li:first-child").css("background", "cyan")}
            function dian5() {$("ul li:last-child").css("background", "blue")}
            function dian6() {$("ul li:only-child").css("background", "purple")}
        </script>
    </head>
    <body>
        <div id="father">
            <ul id="left">
                <li>li1-1</li><li>li1-2</li><li>li1-3</li><li>li1-4</li><li>li1-5</li>
            </ul>
            <ul id="right">
                <li>li1-1</li><li>li1-2</li><li>li1-3</li><li>li1-4</li>
            </ul>
            <ul id="right1">
                <li>li1-1</li>
            </ul>
        </div>
        <div id="myDiv">
            <input type="button" value="ul第二个li变红" onclick="dian()">&nbsp;
            <input type="button" value="ul第偶数个li变橙" onclick="dian1()">&nbsp;
            <input type="button" value="ul第奇数个li变黄" onclick="dian2()">&nbsp;
            <input type="button" value="ul第(3n+2)个li变绿(n从0开始)" onclick="dian3()">&nbsp;
            <input type="button" value="ul第一个li变青" onclick="dian4()">&nbsp;
            <input type="button" value="ul最后一个li变蓝" onclick="dian5()">&nbsp;
            <input type="button" value="只有一个li的ul的li变紫" onclick="dian6()">&nbsp;
        </div>
    </body>
</html>

17. 内容过滤选择器

在已经选择的对象中根据它所包含的子元素和文本内容进行过滤。

  • :contains(text)：
    • 选择所有包含指定文本的元素。
    • text: 用来查找的一个文本字符串。这是区分大小写的。
    • 示例：$(“div:contains(‘str’)”)
  • :empty :
    • 匹配所有不包含子元素或者文本的空元素。(包括文本节点)
    • 示例：$(“td:empty”)  返回值  集合元素
  • :has(selector)：
    • 在已经筛选的元素中根据selector在进行筛选，只有符合:之前以及has中定义的选择器规则，元素才能被选择。
    • 示例：如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，不是直接的子元素也可以。
  • :parent：
    • 选择所有含有子元素或者文本的父级元素。与empty相对。
    • 示例：$(“td:parent”)  返回值  集合元素
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {$("li:contains('男')").css("background", "red")}
            function dian1() {$("td:empty").css("background", "orange")}
            function dian2() {$("div:has(p)").css("background", "yellow")}
            function dian3() {$("td:parent").css("background", "green") }
        </script>
    </head>
    <body>
        <div style="height: 100px">
            <div style="float: left;">
                <li>路飞男</li><li>索隆男</li>
                <li>娜美女</li><li>乌索普男</li>
                <span>山治男</span><br>
            </div>
            <table border="1px" style="float: left;">
                <tr>
                    <td></td><td>乔巴男</td>
                </tr>
                <tr>
                    <td>罗宾女</td><td></td>
                </tr>
            </table>
        </div>
        <div>
            <p>弗兰奇男</p><span>布鲁克男</span>
        </div>
        <br>
        <input type="button" value="包含'男'的li变红" onclick="dian()">&nbsp;
        <input type="button" value="不包含子元素或文本的td变橙" onclick="dian1()">&nbsp;
        <input type="button" value="包含p的div变黄" onclick="dian2()">&nbsp;
        <input type="button" value="包含子元素或文本的td变绿" onclick="dian3()">
    </body>
</html>

18. 可见性过滤选择器

是根据元素的可见和不可见状态来选择相应的元素

  • :hidden：匹配所有的不可见元素,或者 type 为 hidden 的元素。
    • 示例：$(“input:hidden”)
  • :visible： 匹配所有的可见元素。
    • 示例：$(“input:visible”）  返回值   集合元素
    • 元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {$("tr:hidden").css("background", "red").show();}
            function dian1() {
                /*   val()
                    无参数：获取
                    一个参数：设置
                */
                var val = $("input:hidden").val();
                alert(val);
            }
        </script>
    </head>
    <body>
        <table border="1px">
            <!--隐藏一行-->
            <tr style="display:none"><td>艾斯</td></tr>
            <tr> <td>罗杰</td> </tr>
        </table>
        <form>
            <input type="text" name="username" value="甚平">
            <!--表单隐藏数据-->
            <input type="hidden" name="id" value="46">
        </form>
        <input type="button" value=".show()显示隐藏的变红的tr" onclick="dian()">&nbsp;
        <input type="button" value="弹出隐藏的input的value值" onclick="dian1()">&nbsp;
    </body>
</html>

19. 总结

  1. 语法：$(“选择器”).action()
  2. 互转
    1. dom->jquery：$(dom 对象)
    2. jquery->dom：
      1. jquery 对象[index]
      2. jquery 对象.get(index)
  3. 选择器
    1. 语法：$(“选择器表达式”)
    2. 基本选择器
      1. id：$(“#id”)
      2. 类：$(“.类名”)
      3. 元素：$(“元素名”)
      4. 组合选择器：$(“选择器 1,选择器 2,选择器 3,…”)
      5. 属性选择器
        1. [id]
        2. [属性=值]
        3. [属性!=值]
        4. [属性^=值]
        5. [属性$=值]
        6. [属性*=值]
        7. [属性=值][属性=值][属性=值]
      6. 层次选择器
        1. 后代：$(“parent child”)
        2. 子：$(“parent>child”)
        3. 相邻的下一个：$(“prev+next”)
        4. prev~siblings：匹配prev元素之后的所有siblings元素

20. 表单类型过滤器

  • :input：匹配input, textarea,select和 button元素。
  • :text：匹配所有的单行文本框。
  • :password：匹配所有密码框。
  • :radio：匹配所有单选按钮。
  • :checkbox：匹配所有复选框。
  • :submit：匹配所有提交按钮。
  • :image：匹配所有图像域。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            window.onload = function () {
                $("input[name='image']").css("height", "50px");
            }
            function dian() {
                /*json 数据格式
                    对象{key1:value1,key2:value2}
                    数组[元素1,元素2...]
                  js天生就是json数据格式
                */
                $(":input").css({"background": "red", "fontSize": "17px"});
                $("#messages").text(" $(\":input\")匹配到了" + $(":input").length + "个")
            }
            function dian1() {
                $(":text").css("background", "orange");
            }
            function dian2() {$(":password").css("background", "yellow");}
            function dian3() {
                var radioVal = $(":radio").val();
                alert(radioVal);
                $(":radio").prop("checked", true);
            }
            function dian4() {$(":checkbox").prop("checked", true);}
            function dian5() {$(":submit").css("background", "green"); }
            function dian6() {$(":image").css("background", "cyan");
            }
        </script>
    </head>
    <body>
        <form>
            文本：<input type="text" value="文本"><br>
            密码：<input type="password"><br>
            按钮：<input type="button" value="input按钮"><br>
            <!--button按钮  submit提交按钮  都具有提交表单的功能-->
            按钮：<button>button按钮(具有提交表单的功能)</button><br>
            隐藏：<input type="hidden"><br>
            单选框：<input type="radio" value="单选框"><br>
            复选框：<input type="checkbox" value="复选框1"><input type="checkbox" value="复选框"><br>
            图片域：<input type="image"><br>
            图片域：<input type="image" name="image" src="../image/1.jpg"><br>
            提交按钮：<input type="submit" value="提交"><br>
            重置按钮：<input type="reset" value="重置"><br>
            下拉菜单：<select><option>重庆</option><option>北京</option></select><br>
            上传文件：<input type="file" value="文件"><br>
            多行文本框：<textarea>多行文本框</textarea><br>
            <input type="button" value="单行文本变橙" onclick="dian1()">&nbsp;
            <input type="button" value="密码框变黄" onclick="dian2()">&nbsp;
            <input type="button" value="输出单选框的value值并选中" onclick="dian3()">&nbsp;
            <input type="button" value="勾选复选框" onclick="dian4()">&nbsp;
            <input type="button" value="提交按钮变绿" onclick="dian5()">&nbsp;
            <input type="button" value="图片域变青" onclick="dian6()">&nbsp;
            <input type="button" value="所有的表单标签变红变大" onclick="dian()">&nbsp;
        </form>
        <div id="messages"></div>
    </body>
</html>

21. 表单状态过滤器

状态过滤器：根据表单元素当前状态进行过滤的选择器  

  • :disabled 选择器、:enabled 选择器
    • 仅可用于选择支持disabled属性（attribute）的HTML元素(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
  • :enabled：匹配所有input中不带有disabled=”disabled”的元素。
    • 示例：$(“input:enabled”)
  • :disabled：匹配所有不可用元素。与enabled相反。
    • 示例：$(“input:disabled”)  返回值 集合元素
  • :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。
    • 示例：$(“input:checked”)
  • :selected：匹配所有选中的option元素。
    • 示例：$(“select option:selected”)
    • :selected 选择器只为适用于为<option>元素。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                $(":input:enabled").css("background", "red");
                $(":input:disabled").css("background", "orange");
            }
            function dian1() {
                /*
                    遍历jQuery(选中的),each传入的参数是匿名函数
                    匿名函数(索引,对应的元素对象)
                */
                $(":input:checked").each(function (i, obj) {
                    alert($(obj).val());
                })/*.css("background", "red");*/
            }
            function dian2() {
                var selectedVal = $("select option:selected").val();
                alert(selectedVal);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" value="可修改">&nbsp;
            <input type="text" value="disabled='disabled'" disabled="disabled">&nbsp;<br>
            爱好：<br>
            <input type="checkbox" value="climbing">爬山<br>
            <input type="checkbox" value="cycling">骑行<br>
            <input type="checkbox" value="playing">玩耍<br>
            城市：<br>
            <select>
                <option value="001">重庆</option>
                <option value="002">北京</option>
                <option value="003">天津</option>
            </select>
        </form>
        <input type="button" value="弹出选中的checkbox的value值" onclick="dian1()">&nbsp;<br>
        <input type="button" value="弹出选中的option的value值" onclick="dian2()">&nbsp;<br>
        <input type="button" value="可修改的input变红，不可修改的input变橙" onclick="dian()">&nbsp;<br>
    </body>
</html>

22. 创建 DOM 元素

使用 jQuery 的工厂函数 $(html); 会根据传入的 html 标记字符串创建一个 jQuery的DOM对象并返回。
注意:

  • 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中。
    • 例如：append();
  • 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式。
    • 例如：创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                //标签字符串 -> jQuery对象
                var imgStr = "<img src='../image/1.jpg' style='height: 100px;height: 100px'>";
                //使用jquery创建 dom元素$(html)
                var $img = $(imgStr);
                //插入到文档中:append 插入到父元素内部的结尾处
                $(document.body).append($img);
            }
        </script>
    </head>
    <body>
        <input type="button" value="创建DOM对象" onclick="dian()">&nbsp;<br>
    </body>
</html>

23.DOM 插入现有元素内

将指定的或新创建的 jQuery 的 dom 对象插入到指定位置上。

按照插入方式的不同，可分为插入到某元素内作为该元素的子节点方式；

  • parent.append(child)：
    • 向父元素（parent）加入子元素（child），插入后子元素为父元素的最后一个孩子。
  • child.appendTo(parent)：
    • 将子元素（child）插入到父元素（parent）下，插入后子元素为父元素的最后一个孩子。
    • 与 append 调用方式相反，功能相同。
  • parent.prepend(child)：
    • 向父元素（parent）加入子元素（child），插入后子元素为父元素的第一个孩子
  • child.prependTo(parent)：
    • 将子元素（child）插入到父元素（parent）下，插入后子元素为父元素的第一个孩子。
    • 与 prepend 调用方式相反，功能相同。
  • 注意：parent、child 一般的使用场景都是 jQuery 的 dom 对象。
  • .html()：
    • 获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
  • .text()：
    • 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {color: blue;margin: 8px;}
            b {color: red;}
        </style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {
                var $img = $("<img src='../image/1.jpg' style='width: 300px;'>");
                $(document.body).append($img);
                //$img.appendTo($(document.body));
            }

            function dian1() {
                var $img = $("<img src='../image/3.jpg' style='width: 300px;'>");
                $img.prependTo($(document.body));
                //$(document.body).prepend($img);
            }
        </script>
    </head>
    <body>
        <input type="button" value="往父元素的第一个位置插入" onclick="dian1()">&nbsp;<br>
        <input type="button" value="插入到父元素内部的结尾处" onclick="dian()">&nbsp;<br>
        <p><b>Test</b>Paragraph.</p>
        <p style="color: #ff6347">This<button name="nada">button</button>does nothing.</p>
        <p></p>
        <script>
            $("p").click(function () {
                var htmlStr = $(this).html();
                $(this).text(htmlStr);
            });
            var firstStr = $("p:first").text();
            $("p:last").html(firstStr);
        </script>
    </body>
</html>

24.DOM 插入现有元素外作该元素的兄弟节点

  • brother.after(content) :
    • 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
  • brother.before(content):
    • 根据参数设定，在匹配元素的前面插入内容。
  • obj.insertAfter(target):
    • 将目标对象（obj）在插入到某个兄弟节点（brother）之后。
  • obj.insertBefore(target) :
    • 将目标对象（obj）在插入到某个兄弟节点（brother）之前。
  • 注意:brother、obj 一般的使用场景都是 jQuery 的 dom 对象。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {$("p").after("<b>p(后)</b>")}
            function dian1() {$("p").before("<b>p(前)</b>")}
            function dian2() {$("<b>p(后)</b>").insertAfter($("p"))}
            function dian3() {$("<b>p(前)</b>").insertBefore($("p"))
            }
        </script>
    </head>
    <body>
        <p>我是p1</p><p>我是p2</p><br>
        <input type="button" value="brother.before(content)" onclick="dian1()"><br>
        <input type="button" value="brother.after(content)" onclick="dian()"><br>
        <input type="button" value="obj.insertBefore(target)" onclick="dian3()"><br>
        <input type="button" value="obj.insertAfter(target)" onclick="dian2()"><br>

    </body>
</html>

25. 课堂练习

下拉框练习要求：

  • 目标下拉框如果有选中值，则被选框的选中值插入到目标下拉框的第一个选中值下方。

   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>筛选条件</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script type="text/javascript">
            function turnRight() {$("#second").append($("#first option:selected"))}
            function turnLeft() {$("#first").append($("#second option:selected"));}
            function turnAllRight() {$("#second").append($("#first option"))}
            function turnAllLeft() {$("#first").append($("#second option"))}
        </script>
        <style type="text/css">
            input[type="button"] {width: 100px;}
            select {width: 100px;}
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <select id="first" multiple="multiple">
                <option value="">java</option>
                <option value="">.net</option>
                <option value="">web 前端</option>
                <option value="">测试</option>
                <option value="">运维</option>
            </select>
            <div style="display: inline-block;">
                <input type="button" value=">>" onclick="turnRight()"/><br/>
                <input type="button" value="<<" onclick="turnLeft()"/><br/>
                <input type="button" value="全部 >>" onclick="turnAllRight()"/><br/>
                <input type="button" value="全部 <<" onclick="turnAllLeft()"/><br/>
            </div>
            <select id="second" multiple="multiple">
            </select>
        </div>
    </body>
</html>

26. 删除 DOM 元素的方式

  • obj.detach()
    • 从 jQuery 对象（obj）中删除所有匹配选择器(selector)的元素。
    • 类型: Selector
      一个选择表达式将需要移除的元素从匹配的元素中过滤出来。
    • 示例：$(“p”).detach(“.hello”);
  • obj.empty()
    • 递归删除 obj （jQuery 对象）的全部子节点。不删除自己。
    • 这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。
    • 示例： $(“#outerDiv”).empty();
  • obj.remove()
    • 删除 obj （jQuery 对象）以及该对象全部子节点、节点绑定的事件、jQuery数据。
    • 类型: String
      一个选择器表达式用来过滤将被移除的匹配元素集合。
    • 示例： $(“#topDiv>p”).remove();
  • obj.unwrap()
    • 将匹配元素集合(jQuery 对象)的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
    • 示例： $(“#topDiv”).unwrap();这个方法将移出元素的父元素。
    • 这能快速取消 .wrap()方法的效果。
    • 匹配的元素（以及他们的同辈元素）会在 DOM 结构上替换他们的父元素。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {background: aquamarine;}
            div { background: skyblue;}
        </style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function dian() {$("p").detach(".myP");}
            function dian1() {$("div").empty();}
            function dian2() {$("p").remove();}
            function dian3() {$("p").remove(".myP");}
            function dian4() {$("a").unwrap();}
        </script>
    </head>
    <body>
        <p class="myP">我是p1</p>
        <p>我是p2</p>
        <div>
            我是div的文本<p>我是div的p</p><a href="#">我是div的a</a>
        </div>
        <input type="button" value="删除class='myP'的p(detach)" onclick="dian()"><br>
        <input type="button" value="删除div的全部子节点" onclick="dian1()"><br>
        <input type="button" value="删除p的全部子节点、节点绑定的事件、数据" onclick="dian2()"><br>
        <input type="button" value="删除class='myP'的p(remove)" onclick="dian3()"><br>
        <input type="button" value="删除div>p的父元素" onclick="dian4()"><br>
    </body>
</html>

27. DOM 插入并包裹现有内容

  • .wrap() 
    • 在每个匹配的元素外层包上一个html元素。
    • 类型: String, Selector, Element, jQuery
      一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
  • .wrapAll()
    • 在所有匹配元素外面包一层HTML结构。
    • 类型: String, Selector, Element, jQuery
      用来包在外面的HTML片段，选择表达式，jQuery对象或者DOM元素。
  • .wrapInner()  
    • 在匹配元素里的内容外包一层结构。
    • 类型: String
      用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。
  • .unwrap()  
    • 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
  • .wrap()、.wrapAll()、.wrapInner()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function test() {$("p").wrap("<div class='wrap'></div>");}
            function test1() {$("p").wrapAll("<div class='wrap'></div>");}
            function test2() {$("p").wrapInner("<b></b>");}
        </script>
    </head>
    <body>
        <p>p1</p><p>p2</p><p>p3</p>
        <button type="button" onclick="test()">点我</button>
        <!--<button type="button" onclick="test1()">点我</button>
        <button type="button" onclick="test2()">点我</button>-->
    </body>
</html>

wrap                                             wrapAll                                    wrapInner

       

28. 复制元素(克隆)

  • .clone( [withDataAndEvents ] )
    • 创建一个匹配的元素集合的深度拷贝副本。
    • 类型: Boolean
      一个Boolean值，表示是否会复制元素上的事件处理函数。
    • 从jQuery 1.4开始，元素数据也会被复制。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function test() {$("b").clone().prependTo($("p"));}
        </script>
    </head>
    <body>
        <b>SEVENTEEN</b><p>CARAT</p>
        <button type="button" onclick="test()">克隆b到p的前面</button>
    </body>
</html>

29.DOM 替换

  • obj.replaceAll(target):
    •  用集合的匹配元素替换每个目标元素。
    • 类型: Selector
      一个选择器字符串，jQuery对象，DOM元素，或者元素数组，包含哪个元素被替换。
  • obj.replaceWith(newContent):
    • 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
    • 类型: String, Element, jQuery
      用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。
  • .replaceAll()和.replaceWith()和功能一样，但是目标和源相反。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function test() {$("<b>加粗</b>").replaceAll($("p"));}
            function test1() {$("p").replaceWith($("<b>加粗</b>"));}
        </script>
    </head>
    <body>
        <p>p1</p><p>p2</p><p>p3</p>
        <button type="button" onclick="test()">用b替换所有(All)p</button>
        <button type="button" onclick="test1()">将p指定(With)为b</button>
    </body>
</html>

总结

  1. 表单类型过滤器
    1. :input input textarea select button
    2. :text 单行文本框
    3. :password 密码框
    4. :radio 单选框
    5. :checkbox 复选框
    6. :submit 提交按钮
    7. :image 图像域
  2. 表单状态过滤器
    1. :enabled 可用的
    2. :disabled 禁用的
    3. :checked 被选中的
    4. :selected 下拉框被选择的
  3. 内部插入
    1. parent.append(obj);
    2. obj.appendTo(parent);
    3. parent.prepend(obj);
    4. obj.prependTo(parent);
  4. 外部插入
    1. brother.after(obj);
    2. obj.insertAfter(brother);
    3. brother.before(obj);
    4. obj.insertBefore(brother);
  5. Jquery 操作 dom 元素
    1. obj.detach(‘selector’):从 jQuery 对象（obj）中删除所有匹配选择器(selector)的元素。
      示例：$(“p”).detach(“.hello”);
    2. obj.remove()
      删除 obj （jQuery 对象）以及该对象全部子节点、节点绑定的事件、数据
    3. obj.empty()：
      递归删除 obj （jQuery 对象）的全部子节点。不删除自己. 示例： $(“#outerDiv”).empty();
    4. obj.unwrap()
      删除 obj （jQuery 对象）的父元素，保留自身以及兄弟节点。
      示例： $(“#topDiv”).unwrap();
      这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在 DOM 结构上替换他们的父元素。
  6. 包裹
    1. wrap(html|element|fn)
      把所有匹配的每个元素用其他元素的结构化标记包裹起来。
    2. wrapAll
      将所有匹配的元素用单个元素包裹起来
    3. wrapInner(htm|element|fnl)
      将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来
  7. dom 元素的克隆
    clone([Even[,deepEven]])
    创建一个指定的元素集合完全相同的副本。完全相同泛指数据相同，副本指内存地址不同
  8. 替换
    obj.replaceAll(‘selector’/dom):使用 obj 替换 dom 对象或 selector 筛选的 dom 对象。
    （jQuery 的参数建议使用 dom 对象传递）。替换后 obj 被 clone，分别替换目标元素。
    obj.replaceWith(‘selector’/dom):与 replaceAll 调用方式相反。

30. 属性

属性操作：获取或设定DOM元素的属性值。例如：<input type=”button” /> type为属性。

  • obj.attr(‘proName’, ‘ value’)：
    • 设定或获取目标对象(obj)的属性。
    • $(‘#img’).attr( ‘src’, ‘1.png’);设定src属性为1.png。
    • $ (‘#img’).attr(‘src’);获取src属性值。
    • 注意事项：如果当前元素没有设定某属性，浏览器会默认给这个元素加上默认值。
      • 例如checkbox的checked属性默认为false，但是使用attr只能返回undefined。
  • obj.prop(‘proName’,’value’)：
    • 设定或获取目标对象(obj)的属性。
    • 与attr使用方式完全一样，但可以获取没有声明的属性值。
  • obj.val()：
    • 设置或获取表单类型的元素的value值。
    • 等同于obj.prop (“value”,”propValue”) ;

30.1. 课堂案例

使用 prop 设计 table 里的 tr 有 checkbox

全选/全不选 复选框 序号  姓名 年龄
复选框1 1 路飞 19
复选框2 2 索隆 21
复选框3 3 山治 21 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function ckAll() {
                var checked = $("#ckAll").prop("checked");
                $(".ck").prop("checked", checked);
            }
            function ck() {
                //class="ck"的checkbox的数量
                var ckCount = $(".ck").length;
                //class="ck"且选中的checkbox的数量
                var ckCheckedCount = $(".ck:checked").length;
                $("#ckAll").prop("checked", ckCheckedCount == ckCount);
            }
        </script>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="">
            <tr>
                <th>
                    全选/全不选<input type="checkbox" id="ckAll" onclick="ckAll()">
                </th>
                <th>序号</th><th>姓名</th><th>年龄</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" onclick="ck()"></td>
                <td>1</td><td>路飞</td><td>19</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" onclick="ck()"></td>
                <td>2</td><td>索隆</td><td>21</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" onclick="ck()"></td>
                <td>3</td><td>山治</td><td>21</td>
            </tr>
        </table>
    </body>
</html>

31. class 操作：

修改目标元素所使用的样式类。

  • obj.addClass(className)：
    • 示例：$(“p”).addClass(“font”);//font 为样式类名
    • 类型: String
      为每个匹配元素所要增加的一个或多个样式名。
  • obj.hasClass(className)：
    • 示例：var boolean =$(“p”).hasClass(“font”);
    • 类型: String
      要查询的样式名。
    • 判断目标元素是否使用指定样式，返回值 boolean。
  • obj.removeClass([className])：
    • 示例：$(“p”).removeClass(“font”);
    • 类型: String
      每个匹配元素移除的一个或多个用空格隔开的样式名。
    • 删除目标元素对样式类（className）的使用。
  • obj.toggleClass(className)：
    • 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。
    • 即：如果存在（不存在）就删除（添加）一个类。
    • 类型: String
      在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .color {background: tomato;}
        </style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function test() {
                $("p").addClass("color");
                console.log($("p").hasClass("color"));
            }
            function test1() {$("p").removeClass("color");}
            function test2() {$("p").toggleClass("color");}
        </script>
    </head>
    <body>
        <p>你好</p>
        <input type="button" value="添加样式" onclick="test()">
        <input type="button" value="删除样式" onclick="test1()">
        <input type="button" value="反转样式" onclick="test2()">
    </body>
</html>

32. CSS属性-.CSS()

不通过设定样式类而直接修改样式的方式。

  • obj.css(‘styleName’):
    • 获取目标样式的取值。
    • 示例：$(‘#div’).css(“font-size”)
  • obj.css(‘styleName’,’styleValue’)：
    • 设定目标元素样式的值为指定值：
    • 示例：$(‘#div’).css(‘color’,’red’);
  • obj.css({‘styleName’,’styleValue’,..})：
    • 批量设定目标元素的样式值。
    • 示例：$(‘#div’).css({color:’red’,’background-color’:’yellow’});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src=../js/jquery-1.9.1.js></script>
        <script type="text/javascript">
            function test() {
                $("p").css("color", "red");
                console.log($("p").css("color"));
                $("p").css({"font-size": "18px", "background-color": "yellow"});
            }
        </script>
    </head>
    <body>
        <p>p 标签 1</p><p>p 标签 2</p>
        <button onclick="test()">测试</button>
    </body>
</html>

33. CSS属性-查询当前元素的大小以及位置

  • .width()：返回: Integer
    • 为匹配的元素集合中获取第一个元素的当前计算宽度值。
  • .height()：高度值。
  • .innerWidth()：
    • 为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
  • .innerHeight()：高度值。
  • .outerWidth( [includeMargin ] )：
    • 获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）
  • .outerHeight( [includeMargin ] )：高度值。
  • offset()：返回: Object
    • 在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
  • .offset( coordinates )：返回: jQuery
    • 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
    • 类型: PlainObject
      一个包含top 和 left属性的对象，用整数指明元素的新顶部和左边坐标。
  • .position()：返回: Object
    • 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。
    • (offset parent指离该元素最近的而且被定位过的祖先元素 )
  • 注意：
    • .position()方法可以取得元素相对于父元素的偏移位置。
    • .offset()是获得该元素相对于documet的当前坐标。
    • 当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。
    • .position()返回一个包含 top 和 left属性的对象。
    • jQuery不支持获取隐藏元素的偏移坐标及所占用的边框，边距和填充的大小。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .myDiv {
                width: 50px;height: 50px;
                color: #9411a2;background: #f7cac9;
                padding: 10px;margin: 10px;
                border: 5px solid #92a8d1;
            }
            .outDiv {
                width: 100px;margin: 10px;
                border: 5px solid #9411a2;
            }
        </style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function test() {
                var $myDiv = $(".myDiv");
                console.log("width:" + $myDiv.width());
                console.log("height:" + $myDiv.height());
                console.log("innerHeight:" + $myDiv.innerHeight());
                console.log("innerWidth:" + $myDiv.innerWidth());
                console.log("outerHeight:" + $myDiv.outerHeight());
                console.log("outerWidth:" + $myDiv.outerWidth());
            }
            function test1() {
                var offset = $(".myDiv").offset();
                console.log("距离文档左边界为：" + offset.left);
                console.log("距离文档上边界为：" + offset.top);
                var position = $(".myDiv").position();
                console.log("距离父元素左边界为：" + position.left);
                console.log("距离父元素上边界为：" + position.top);
            }
        </script>
    </head>
    <body>
        <div class="outDiv">
            <div class="myDiv">你好</div>
        </div>
        <input type="button" value="控制台查询当前元素大小" onclick="test()">
        <input type="button" value="控制台查询当前元素位置" onclick="test1()">
    </body>
</html>

34. jQuery 对于文本内容的封装。

  • .html()：
    • 获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
  • .text()：
    • 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
  • obj.html()：读取和设置某个元素中的 HTML 内容，与 dom 中的 innerHTML 类似。取得第一个匹配元素的 html 内容。 
    var result=$("p").html();
console.log(result);
$("p").html("<b>关羽</b>")
  • obj.text():读取和设置某个元素中的文本内容，与 dom 中的 innerText 类似。 
    var result=$("p").text();
console.log(result);
$("p").text("<b>关羽</b>")

35.绑定事件处理器 – on()

  • on 方法绑定事件和处理函数
  • .on( events [, selector ] [, data ], handler(eventObject) )
    • 返回: jQuery
    • 描述: 在选定的元素上绑定一个或多个事件处理函数。
  • $(‘outerSelector’).on( events [, selector ] [, data ], handler(eventObject) )
    • outerSelector：外层区域选择器。
  • events
    • 类型: String
    • 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间.
    • 比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”。
  • selector
    • 类型: String
    • 内部元素选择器（缺省为外部选择器）
    • 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
  • data
    • 类型: Anything：传递给执行函数的参数，封装在 event.data 中。json 类型。
    • 当一个事件被触发时，要传递给事件处理函数的event.data。
  • handler(eventObject)
    • 类型: Function()：事件处理函数
    • 事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("p").on("click", {id: 1}, function (e) {
                    console.log($(this).text());
                    console.log(e);
                    console.log(e.data);
                    console.log(e.data.id);
                });
            })
        </script>
    </head>
    <body>
        <p>娜美</p><p>罗宾</p><p>乔巴</p>
    </body>
</html>

36. off 方法使用

  • off 方法解除事件和处理函数
  • .off( events [, selector ] [, handler(eventObject) ] )
    • 返回: jQuery
    • 描述: 移除一个事件处理函数。
  • $(‘outerSelector’).off( events [, selector ] [, handler(eventObject) ] )
    • outerSelector：外层区域选择器。
  • events
    • 类型: String
    • 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”。
  • selector
    • 类型: String
    • 内部元素选择器（缺省外部选择器）
    • 一个选择器，当绑定事件处理程序时最初传递给 .on()的那个。
  • handler(eventObject)
    • 类型: Function() ：需要解除的事件处理函数。
    • 事件处理程序函数以前附加事件上，或特殊值false
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
    </head>
    <body>
        <p>娜美</p><p>罗宾</p><p>乔巴</p>
    </body>
    <script>
        var fun = function () {
            console.log($(this).text());
        }
        $("p").on("click", fun);
        $("p").off("click", fun)//点击 p ,控制台没反应
    </script>
</html>

37. 特殊事件绑定方式(简写)

为了编写方便，jQuery 定义了特殊事件绑定函数来绑定事件。

  • $(‘button’).click(function() {});

                       等价

  • $(‘button’).on(‘click’,function() {});

特殊事件绑定的方式为：

  • $(‘selector’).eventType(data,function() {});
    • selector：选择器。
    • eventType：函数名，但直接对应事件类型（注意省略 on）。
    • data：传递给执行函数的参数，封装在 event.data 中。json 类型。
$("p").click(function(){
    console.log($(this).text());
})

38. 按照事件分类

39. 浏览器事件

39.1. resize

用于窗口对象（window），当窗口大小发生变化时调用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(window).resize(function () {
                console.log("窗口大小改变了");
            });
        </script>
    </head>
    <body>
    </body>
</html>

39.2. scroll

用于窗口、iframe、div 等可能出现滚动条的对象。当使用鼠标滚轮滚动时调用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(window).scroll(function () {
                console.log("窗口滚动了");
            });
        </script>
    </head>
    <body>
        <div style="height: 2000px;background: #f7cac9"></div>
    </body>
</html>

40.onload 与ready

  • window.onload 和 body.onload 为同一事件绑定方式，同时绑定时只调用一个。
  • 唯一的区别是:
    • 可以在 body 标签上声明处理函数。
    • 例如<body onload=’init()’>这两个事件对应的是整个文档(包含文档上的 css、js、html、图片信息)加载完成后调用。
    • 只能写一次。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>#img{width: 100px;}</style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            function init() {
                var divDom = document.getElementById("myDiv");
                console.log(divDom);
                alert(divDom.innerText);
                alert("页面加载完成，触发onload事件，执行init()函数");
            }
        </script>
    </head>
    <body onload="init()">
        <div id="myDiv">我是div</div>
        <img src="../image/1.jpg" id="img">
    </body>
</html>

  • document.ready：
    • 当 html 文档解析后就调用事件处理函数。图片、css 等此时有可能没有加载，不兼容。
  • 文档加载事件函数：
    • load(已弃用)：用于 window、图片等。在文档或图片加载完成后执行处理函数。
    • ready：用于 document 对象，当文档加载后执行处理函数
      • 相当于 document.onload.可以写多次
      • –举例：$(document).ready(fun1);
      • –缩写：$(fun1);
    • unload(已弃用)：用于 window 对象。在文档关闭前执行处理函数
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>#img{width: 100px;}</style>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            /*$(document).ready(function () {
                alert($("#myDiv").text());
            });*/
            //ready函数的简化
            $(function () {
                alert("ready1");
            })
            $(function () {
                alert("ready2");
            })
            $(function () {
                alert($("#myDiv").text());
            });
        </script>
    </head>
    <body>
        <div id="myDiv">我是div</div>
        <img src="../image/1.jpg" id="img">
    </body>
</html>

 

41. 表单事件函数：

  • eventData
    • 类型: Object
    • 一个对象，它包含的数据键值对映射将被传递给事件处理程序。
  • handler(eventObject)
    • 类型: Function()
    • 每次事件触发时会执行的函数。
  • 返回: jQuery

41.1. focus

当元素获得焦点时触发目标函数，不支持冒泡；

  • .focus()
    • 为 JavaScript 的 “focus” 事件绑定一个处理函数，或者触发元素上的 “focus” 事件。

41.2. focusin

  • .focusin()

    • focusin 事件会在元素（或者其内部的任何元素）获得焦点时触发。
    • 跟 focus 事件的显著区别在于
      • focusin可以在父元素上检测子元素获得焦点的情况
      • (换而言之，它支持事件冒泡)。

41.3. blur

  • .blur()

    • 一个元素失去焦点将触发blur事件。

    • 为 “blur” 事件绑定一个处理函数，或者触发元素上的 “blur” 事件（注：此事件不支持冒泡）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {<!--当输入用户名完毕失去焦点,得到用户名,在信息框显示输入的用户名-->
                $("#username").blur(function () {
                    var username = this.value;
                    alert(username);
                });
            })
        </script>
    </head>
    <body>
        <form action="">用户名:<input type="text" name="username" id="username"></form>
    </body>
</html>

41.4. focusout

  • .focusout()

    • 将一个事件函数绑定到”focusout” 事件。
    • focusout 事件会在元素（或者其内部的任何元素）失去焦点时触发。
    • 跟 blur 事件的显著区别在于
      • 它可以在父元素上检测子元素失去焦点的情况
      • (换而言之，它支持事件冒泡)。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("#text1").focus(function (){$(this).css("color","tomato");});
                $("#text1").blur(function (){$(this).css("color","black");});
                $("#txt1").focusin(function (){$(this).css("background","pink"); });
                $("#txt1").focusout(function (){$(this).css("background","white");});
            });
        </script>
    </head>
    <body>
        <input type="text" id="text1" value="focus获取焦点，blur失去焦点"style="width: 180px"><br><br>
        <input type="text" id="txt1" value="focusin获取焦点，focusout失去焦点"style="width: 220px">
    </body>
</html>

41.5. change

  • .change()

    • 一个元素的值改变的时候将触发change事件。

    • 为JavaScript 的 “change” 事件绑定一个处理函数，或者触发元素上的 “change” 事件。

41.5.1. js / jQuery写法

当下拉框、单选框,文本框的值发生变化时调用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            //1、js写法
            function sel(val) {
                console.log(val);
            }
            //2、jQuery写法
            $(function () {
                $("#province").change(function () {
                    console.log($(this).val());
                });
            })
        </script>
    </head>
    <body>
        <!--1、js写法-->
        <select onchange="sel(this.value)">
            <option value="bj">北京</option><option value="tj">天津</option>
        </select>
        <!-- 2、jQuery写法-->
        <select id="province">
            <option value="cq">重庆</option><option value="gs">甘肃</option>
        </select>
    </body>
</html>

41.5.2. 文本框的 change,验证

案例1：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("#txt1").change(function () {
                    var length = $(this).val().length;//文本框中字符长度
                    $("#lb1").text(length);//长度length设置label标签
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="txt1"><label id="lb1">0</label>
    </body>
</html>

案例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("#username").change(function () {
                    alert("用户名验证" + this.value);
                    //验证用户名:必须是 5~8 位字母数字下划线组成(正则)
                    if (/^\w{5,8}$/.test(this.value)) {
                        alert("验证通过");
                    } else {
                        alert("验证没通过:用户名必须是 5~8 位字母数字下划线组成");
                    }
                });
            });
        </script>
    </head>
    <body>
        用户名:<input type="text" id="username" name="username"/><br/>
    </body>
</html>

41.5.3. submit

  1. 当表单提交时触发,return false 提交失败 ; return true 提交成功。
  2. .submit()
  3. 当用户试图提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上。
  4. 以下几种情况会导致表单被提交：
    1. 用户点击了<input type="submit">, <input type="image">
    2.  或者 <button type="submit">
    3. 或者当某些表单元素获取焦点时，敲击Enter（回车键）
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("form").submit(function () {
                    var val = $("#txtAge").val();
                    if (val.length > 0) {
                        return true;
                    } else {
                        return false;
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="#" method="get">
            <input type="text" name="age" id="txtAge">
            <input type="submit" id="btnSubmit" value="提交">
        </form>
    </body>
</html>

42、事件对象event

  • event.currentTarget
    • 返回: Element
    • 描述: 在事件冒泡过程中的当前DOM元素。
    • 获取绑定事件的 DOM 元素,相当于this。
  • event.data
    • 返回: Object
    • 描述: 当前正在执行的处理程序绑定时，一个可选的数据对象传递给一个事件方法。
    • 传递给执行函数的参数,拿到参数:event.data.参数名。
  • 其他 事件对象 用法
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("p").click({a: 13, b: 17}, function (e) {
                    console.log($(this).html());//我是p1
                    console.dir(e);
                    console.log(e.currentTarget);//<p>我是p1</p>
                    /*
                        ===  内容和类型都相等
                        ==   内容相等
                    */
                    console.log(e.currentTarget === this);//true
                    console.log(e.data);
                });
            });
        </script>
    </head>
    <body><p>我是p1</p></body>
</html>

43、树遍历

通过某一个 dom 对象的父子、兄弟之间的关系检索对象

  •  .children(‘selector’)
    获得当前元素的全部直接子元素(集合)，可以在参数中使用选择器过滤。
  • .find(‘selector’)
    获得当前元素的全部后代元素，可以在参数中使用选择器过滤。
  • .next()
    获得当前元素的下一个兄弟元素。
  • .nextAll()
    获得当前元素之后的全部兄弟元素。
  • .parent()
    获得当前元素的直接父元素。
  • .parents()
    获得当前元素的所有父元素。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src=../js/jquery-1.9.1.js></script>
        <script>
            $(function () {
                $("#btn1").click(function () {
                    $("div").children("span").css("background", "red");
                });
                $("#btn2").click(function () {
                    $("div").find("span").css("background", "orange");
                });
                $("#btn3").click(function () {
                    $("p").next("span").css("background", "yellow");
                });
                $("#btn4").click(function () {
                    $("p").nextAll("span").css("background", "green");
                });
                $("#btn5").click(function () {
                    $("#p2").parent().css("background", "cyan");
                });
            });

        </script>
    </head>
    <body>
        <p>我是p1</p><span>我是span</span>
        <div>
            <span>我是div span1</span>
            <span>我是div span2</span>
            <input type="text" value="我是text">
            <div><p id="p2">我是p2</p><p>我是p3</p>/div>
        </div>
        <input type="button" value="点点点" id="btn1">
        <input type="button" value="点点点" id="btn2">
        <input type="button" value="点点点" id="btn3">
        <input type="button" value="点点点" id="btn4">
        <input type="button" value="点点点" id="btn5">
    </body>
</html>

44、特效

  • duration (默认: 400)
    • 类型: Number or String ; 一个字符串或者数字决定动画将运行多久。
    • 持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。
    • 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
    • 如果提供任何其他字符串，或者这个duration参数被省略，则默认使用400 毫秒的延时。
  • complete
    • 类型: Function() ; 在动画完成时执行的函数。
  • 返回: jQuery 。

44.1.基本特效

  • .hide( )  

    • 隐藏匹配的元素。

  • .show() 

    • 显示匹配的元素。

  • .toggle() 

    • 显示/隐藏匹配的元素。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>img {width: 160px;}</style>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#show").click(function () {
                    $("img").show(3000, function () {
                        alert("显示图片成功");
                    });
                });
                $("#hidden").click(function () {
                    $("img").hide(3000, function () {
                        alert("隐藏图片成功");
                    });
                });
                $("#toggle").click(function () {
                    $("img").toggle(3000, function () {
                        alert("显示/隐藏图片成功");
                    });
                });
            });
        </script>
    </head>
    <body>
        <img src="../image/4.jpg"><br>
        <input type="button" value="显示" id="show">
        <input type="button" value="隐藏" id="hidden">
        <input type="button" value="显示/隐藏" id="toggle">
    </body>
</html>

44.2.渐变

这些方法用于调整元素的透明度。

fadeIn()      

  • 通过淡入的方式显示匹配元素。

fadeOut()    

  • 通过淡出的方式显示匹配元素。

fadeTo()      

  • 调整匹配元素的透明度。

fadeToggle()      

  • 通过匹配的元素的不透明度动画，来显示或隐藏它们。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>img {width: 160px;}</style>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btnFadeIn").click(function () {
                    $("img").fadeIn(2000, function () {
                        alert("淡入显示完成");
                    });
                });
                $("#btnFadeOut").click(function () {
                    $("img").fadeOut(2000, function () {
                        alert("淡出显示完成");
                    });
                });
                $("#btnFadeTo").click(function () {
                    $("img").fadeTo(2000, 0.5, function () {
                        alert("调整透明度完成");
                    });
                });
                $("#btnFadeToggle").click(function () {
                    $("img").fadeToggle(2000, function () {
                        alert("匹配的元素的不透明度动画，来显示或隐藏");
                    });
                });
            });
        </script>
    </head>
    <body>
        <img src="../image/3.jpg"><br>
        <input type="button" value="fadeIn" id="btnFadeIn">
        <input type="button" value="fadeOut" id="btnFadeOut">
        <input type="button" value="fadeTo" id="btnFadeTo">
        <input type="button" value="fadeToggle" id="btnFadeToggle">
    </body>
</html>

44.3滑动

slideDown()

  • 用滑动动画显示一个匹配元素。

slideUp()

  • 用滑动动画隐藏一个匹配元素。

slideToggle()

  • 用滑动动画显示或隐藏一个匹配元素。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> img {width: 160px;}</style>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btnSlideDown").click(function () {
                    $("img").slideDown(2000, function () {
                        alert("显示完成");
                    });
                });
                $("#btnSlideUp").click(function () {
                    $("img").slideUp(2000, function () {
                        alert("隐藏完成");
                    });
                });
                $("#btnSlideToggle").click(function () {
                    $("img").slideToggle(2000, function () {
                        alert("显示或隐藏完成");
                    });
                });
            });
        </script>
    </head>
    <body>
        <img src="../image/2.png"><br>
        <input type="button" value="slideDown" id="btnSlideDown">
        <input type="button" value="slideUp" id="btnSlideUp">
        <input type="button" value="slideToggle" id="btnSlideToggle">
    </body>
</html>

45、Ajax

jQuery 库支持完整的 Ajax 操作。这里所包含的所有函数和方法用于从服务端加载数据，并且不会导致页面刷新。

45.1.底层接口 jQuery.ajax()

  • jQuery.ajax( url [, settings ] )
    • 返回: jqXHR
    • 说明: 执行一个异步的HTTP（Ajax）的请求。
  • url：一个用来包含发送请求的URL字符串String。
  • settings：一个以”{键:值}”组成的AJAX 请求设置。所有选项都是可选的。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btnAjax").click(function () {
                    $.ajax({
                        async: false,//默认true(异步请求) ; false(同步请求)
                        url: "../json/user.json",//一个用来包含发送请求的URL字符串
                        data: {},//发送到服务器的数据。将自动转换为请求字符串格式
                        type: "post",//请求方式 : 默认'GET'
                        dataType: "json",//预期服务器返回的数据类型
                        success: function (data) {//请求成功后的回调函数
                            console.log(data);
                        },
                        error: function (e) {//请求失败时调用此函数
                            console.log(e);
                        }
                    });
                    console.log("点击了ajax按钮");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="ajax" id="btnAjax">
    </body>
</html>

45.1.1. 课堂练习

1、user.json：内容数组  

[{"username":"zs","age": 22,"password": "123"},{"username":"lisi","age":23,"password": "567"},{"username":"zhaoliu","age": 21,"password": "678"}]

2、发ajax取得数组数据

3、循环遍历数组得到每一项放到表格中去。

  (1)html页面写一个table，给定th：用户名 年龄 密码

  (2)按钮 点击发送ajax请求

  (3)回调函数得到数组数据，循环遍历数组得到每一项组成tr td，把他追加到(append)表格中去。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $.ajax({
                        //async: false,//默认true(异步请求) ; false(同步请求)
                        url: "../json/user.json",
                        data: {},
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            $("#tb tr:gt(0)").remove();//只保留th，不加这句，每点一次，添加三行
                            for (var u in data) {
                                console.log(u);
                                var row = "<tr><td>" + data[u].username + "</td><td>" + data[u].password + "</td><td>" + data[u].age + "</td></tr>";
                                $("#tb").append(row);//插入到table内部的结尾处
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                    console.log("点击了ajax按钮");
                });
            });
        </script>
    </head>
    <body>
        <table border="1px" cellpadding="0" cellspacing="0" id="tb">
            <tr><th>用户名</th><th>密码</th><th>年龄</th></tr>
        </table><br>
        <input type="button" value="ajax" id="btn">
    </body>
</html>

                

45.1.2. 跨域使用json


jquery 解决跨域:jsonp
1. 服务端返回包 json 的格式:callback(json 串)
2. 客户端:用下面的格式发送 ajax 的请求

45.2. 快捷方法

45.2.1. jQuery.get() ; jQuery.post()

  • jQuery.get() / post() ：使用一个HTTP GET / POST 请求从服务器加载数据。
    • jQuery.get / post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btnGet").click(function () {
                    $.get("../json/user.json", {}, function (data) {
                        console.log(data);
                    }, "json");
                });
                $("#btnPost").click(function () {
                    $.post("../json/user.json", {}, function (data) {
                        console.log(data);
                    }, "json");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="get" id="btnGet">
        <input type="button" value="post" id="btnPost">
    </body>
</html>

45.2.2. jQuery.getJSON()

使用一个HTTP GET请求从服务器加载JSON编码的数据。

45.2.3 jQuery.load() 

从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。

45.2.4 jQuery.getScript() 

使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

45.3. 辅助函数

.serializeArray()

将用作提交的表单元素的值编译成拥有name和value对象组成的数组。例如[ { name: a value: 1 }, { name: b value: 2 },…]

46、杂项

46.1. 集合操作

46.1.1 .each()

遍历一个jQuery对象，为每个匹配元素执行一个函数。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $("ul li ").each(function (index, data) {
                        console.log(data);
                        console.log("索引值：" + index + "," + $(data).text());
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>我是li1</li><li>我是li2</li><li>我是li3</li>
        </ul>
        <input type="button" value="each遍历" id="btn">
    </body>
</html>

46.1.2 .jQuery.param()

创建一个数组或对象序列化的的字符串，适用于一个URL 地址查询字符串或Ajax请求。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jquery-1.9.1.js"></script>
        <script>
            $(function () {
                $("#form").submit(function () {
                    //var data=$("#form").serializeArray();
                    var data = $(this).serializeArray();
                    console.log(data);
                    var param = $.param(data);
                    console.log(param);
                    return false;//不提交
                });
            });

        </script>
    </head>
    <body>
        <form id='form'>
            <label>用户名：
                <input name='userName' type="text" placeholder="用户名"/>
            </label><br>
            <label for='password'>密码：</label>
            <input name="password" id='password' placeholder="密码"/><br>
            <label>爱好：
                <select name='fav'>
                    <option value='0'>篮球</option>
                    <option value='1'>游戏</option>
                    <option value='2'>学习</option>
                </select>
            </label><br>
            <input type="submit"/>
        </form>
    </body>
</html>

47、通用属性操作

案例见13、属性选择器

  • .attr()

    • 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。

  • .prop()

    • 获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）。

  • .removeAttr()

    • 为匹配的元素集合中的每个元素中移除一个属性（attribute）。

  • .removeProp()

    • 为集合中匹配的元素删除一个属性（property）。

  •  .val()

    • .val()方法主要用于获取表单元素的值，比如 input, select 和 textarea。

    • 对于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回null。
    • 对于选择框和复选框，您也可以使用:selected 和 :checked选择器来获取值。
版权声明：本文为carat9588原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/seventeen9588/p/16258444.html