jQuery学习笔记

最新推荐文章于 2022-09-23 15:55:06 发布

置顶逆来顺受

最新推荐文章于 2022-09-23 15:55:06 发布

阅读量1.7k

点赞数 9

分类专栏： jQuery 文章标签： jQuery 前端

本文链接：https://blog.youkuaiyun.com/qq_36501295/article/details/84499339

版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

1.初识jQuery

1.1初识jQuery

jQuery是什么？

写的更少，做的更多

jQuery是一个JavaScript库，旨在简化HTML DOM树遍历和操作，以及事件处理，动画和Ajax。它是使用许可的MIT许可证的免费开源软件。Web分析表明它是大范围部署最广泛的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）。
jQuery的语法旨在使导航文档，选择DOM元素，创建动画，处理事件和开发Ajax应用程序变得更加容易。jQuery还为开发人员提供了在JavaScript库之上创建插件的功能。这使开发人员能够为低级交互和动画，高级效果和高级，可主题的小部件创建抽象。jQuery库的模块化方法允许创建功能强大的动态Web页面和Web应用程序。

体验jQuery

	<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>初始jQuery</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>

        window.onload = function () {
	        //利用原生的js查找DOM元素
	        var div1 = document.getElementsByTagName("div")[0];
	        var div2 = document.getElementsByClassName("box1")[0];
	        var div3 = document.getElementById("box2");
	        console.log(div1,div2,div3);

	        //利用原生的js修改背景颜色
            // div1.style.backgroundColor = "red";
            // div2.style.backgroundColor = "blue";
            // div3.style.backgroundColor = "yellow";
        }
        $(document).ready(function () {
           // 利用jQUery查找DOM元素
           var $div1 = $("div");
           var $div2 = $(".box1");
           var $div3 = $("#box2");
           console.log($div1,$div2,$div3);

	        //利用jQuery修改背景颜色
            $div1.css({
                background:"red"
            });
	        $div2.css({
		        background:"blue"
            });
	        $div3.css({
		        background:"yellow"
            });
        });
    </script>
</head>
<body>
    <div></div>
    <div class="box1"></div>
    <div id="box2"></div>
</body>
</html>

为什么要使用jQuery

强大选择器: 方便快速查找DOM元素
- 如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
- jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
链式调用: 可以通过.不断调用jQuery对象的方法

        $(document).ready(function () {
           var $div1 = $("div");
           // 链式调用
            $div1.eq(1).css(
                'background',"red"
            ).css('width', '200px');
        });

隐式遍历(迭代): 一次操作多个元素

$(document).ready(function(){
	//隐式遍历找到的所有div
	$("div).css('background','red');
});

-读写合一: 读数据/写数据使用是一个函数

$(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });

事件处理
DOM操作(C增U改D删)
样式操作
动画
丰富的插件支持
浏览器兼容(前端开发者痛点)
- 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日).
- 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。
- 应该选择几点几版本jQuery?
  - 查看百度网页源码使用1.x
  - 查看腾讯网页源码使用1.x
  - 查看京东网页源码使用1.x
  - 综上所述学习1.x,选择1.x
- 应该使用开发板还是生产版?
  - 开发板: 所有代码没有经过压缩,体积更大(200-300KB)
  - 生产版:所有代码经过压缩,提及更小(30-40KB)
  - 初学者为了更好的理解jQuery编码时使用开发板,项目上线时为了提升访问速度使用生产版

jQuery下载地址

jQuery下载

1.2jQuery和JS的加载模式

原生JS和jQuery入口函数的加载模式不同

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery和JS入口函数的区别</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        // 原生JS和jQuery入口函数的加载模式不同
        // 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
        // jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
        // 原生JS的固定写法
        window.onload = function (ev) {
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            var width = window.getComputedStyle(img).width;
            console.log(width);     //540px
        }
        //jQuery固定写法
        $(document).ready(function (ev) {
            var $width = $("img").width();
            console.log($width);        // 0
        });
    </script>
</head>
<body>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>

多个window.onload只会执行一次, 后面的会覆盖前面的
多个$(document).ready()会执行多次,后面的不会覆盖前面的
不会覆盖的本质
- jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

	    /****只弹出Hello 3***/
        window.onload = function (ev) {
            alert("Hello 1");
        }
        window.onload = function (ev) {
	        alert("Hello 2");
        }
        window.onload = function (ev) {
	        alert("Hello 3");
        }
        /***** 都会弹出****/
        $(document).ready(function (ev) {
	        alert("Hello 1");
        });
        $(document).ready(function (ev) {
	        alert("Hello 2");
        });
        $(document).ready(function (ev) {
	        alert("Hello 3");
        });

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数	只能执行一次,如果第二次,那么第一次的执行会被覆盖	可以执行多次,第N次都不会被上一次覆盖
简写方案	无	$(function(){});

为什么我们能访问$符号
- 因为$符号jQuery框架对外暴露的一个全局变量
```
	window.jQuery = window.$ = jQuery;
```
所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery

jQuery入口函数的其他编写方式

	// 方式一
        $(document).ready(function () {
            alert("hello 1");
        });
        // 方式二
        $(function () {
            alert("hello 2");
        });
        // 方式三
        jQuery(document).ready(function () {
            alert("hello 3");
        });
        // 方式四
        jQuery(function () {
            alert("hello 4");
        });

1.3jQuery冲突问题

很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过 $访问, B 框架也通过$ 访问),解决方案见代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery冲突问题</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        //1.释放$使用权 释放操作必须在编写其他jQuery代码之前编写
        jQuery.noConflict(); //以后只能使用jQuery，不能用$
        // $(function () {
        //     alert("hello");
        // });
        // 2 自定义一个访问符号
        var xx = jQuery.noConflict();
        xx(function () {
            alert("Hello");
        })
    </script>
</head>
<body>
</body>
</html>

jQuery核心函数和工具方法

2.1jQuery核心函数

	<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery核心函数</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        //$();就代表调用jQuery的核心函数

        //1.接收一个函数
        $(function () {
            alert("hello 1");
            // 2.接收一个字符串
	        // 2.1接收一个字符串选择器
            //返回一个jQuery对象
	        var $div1 = $("#box2");
	        console.log($div1);
	        var $div2 = $(".box1");
	        console.log($div2);
	        // 2.2接收一个代码片段
	        var $p = $("<p>你好</p>");
	        console.log($p);
	        $div1.append($p);
	        //2.3接收一个原生DOM元素
            var span = document.getElementsByTagName("span");
            console.log(span);
            var $span = $(span);    //用$()将DOM对象包装成jQuery对象
            console.log($span);
        });

    </script>

</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我s</span>
</body>
</html>

2.2jQuery对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery对象</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
           var $div = $("div");
           console.log($div);

           var arr = [1, 2, 3];
           console.log(arr);        //发现jQuery其实是一个伪数组
        });
    </script>

</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

什么是伪数组？
- 有0到length-1的属性
- 并且有length属性

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

2.3jQUery静态方法和实例方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery静态方法和实例方法</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        // 1定义一个类
        function AClass() {

        }
        // 2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法

        AClass.staticMethod = function () {
            alert("静态方法");
        }
        // 静态方法通过类名调用
        AClass.staticMethod();

        //给类添加实例方法

        AClass.prototype.instanceMethod = function () {
            alert("实例方法");
        }
        //实例方法有类的实例调用
        var a = new AClass();
        a.instanceMethod();
    </script>

</head>
<body>

</body>
</html>

2.4静态方法each

		var arr = [1, 2, 3, 4, 5];
		var obj = {0: 1, 1: 2, 2: 3, 3: 4, length: 4};

		/*
		 * 第一个参数: 遍历到的元素
		 * 第二个参数:当前遍历到的索引
		 * 注意点：原生的foreach只能遍历数组，不能遍历伪数组
		 */
		arr.forEach(function (value, index) {
			console.log(index,value);
		})
		// 利用jQuery的each方法遍历数组
		/*
		 * 第一个参数: 当前遍历到的索引
		 * 第二个参数: 遍历到的元素
		 * 可以遍历伪数组
		 */
		$.each(obj, function (index, value) {
			console.log(index, value);
		})

2.5map方法

		var arr = [1, 2, 3, 4, 5];
		var obj = {0: 1, 1: 2, 2: 3, 3: 4, length: 4};

        // 利用原生map方法遍历
        /*
        * 第一个参数：值
        * 第二个参数: 索引
        * 第三个参数:当前被遍历的数组
        * 不能遍历伪数组
        * */
        arr.map(function (value, index, array) {
            console.log(index, value, array);
        })
        // $.map()
        $.map(obj, function (value, index) {
	        console.log(index, value, obj);
        })

jQuery中map和each方法的区别
each遍历谁就返回谁
map无返回值，但是map可以进行加工处理,生成新数组返回

        arr.map(function (value, index, array) {
            console.log(index, value, array);
            return index + value;
        })

2.6其他方法

    <script>
        /*
        * $.trim(str)；
        * 作用：去除字符串两端的空格
        * 参数，需要去除空格的字符串
        * 返回值:去除空格之后的字符串
        * $.isWindow();
        * 作用：判断传入对象是否是window对象
        * $.isArray();
        * 作用：判断传入对象是否是真数组
        * $.isFunction()
        * 作用：判断传入对象是否是一个函数
        * jQuery本质是一个匿名函数
        * ( function( global, factory ) {} );
        * */
        var str = "     zfr     ";
        var arr = [1, 2, 3];
        var arrlike = {0:1, 1:2, 2:3, 3:4};
        var obj = {"name":"zfr", "age": "18"};
        var w = window;
        console.log("---" + str + "----");
        var res = $.trim(str);
        console.log($.isArray(arr));
        console.log($.isWindow(arr));
        console.log($.isFunction(arr));
    </script>

2.7$.holdready

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery holdReady方法</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $.holdReady(true);  //暂停ready方法的执行
        $(document).ready(function () {
            alert("ready");
        })
    </script>

</head>
<body>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            $.holdReady(false);
        }
    </script>
</body>
</html>

jQuery属性操作

jQuery基本选择器

基本选择器

基本选择器	功能	返回值	示例
$("#id")	根据给定的id匹配一个元素	单个元素	$(“xdl”): 选取id值为xdl的元素
$(".class")	根据给定的类匹配元素	元素集合	$(".xdl"): 选取所有class值为xdl的元素
$(“element”)	根据给定的元素名匹配元素	元素集合	$(“p”): 选取所有<p>元素
$("*")	匹配所有元素	元素集合	$("*"): 选取所有元素
$(“selector1,selector2,…selectorn”)	将每一个选择器匹配到的元素合并后返回	元素集合	$(“p,span,.xdl”): 选取所有的<p>元素<span>元素和class值为xdl的元素

层次选择器

层次选择器	功能	返回值	示例
$(“ancestor descendant”)	根据祖先ancestor元素匹配所有的后代descendant元素	元素集合	$(“ul li”): 选择<ul>元素中所有的<li>元素
$(“parent > child”)	根据parent元素匹配所有child元素	元素集合	$(“ul li”): 选择<ul>元素中所有的<li>子元素
$(“prev + next”)	选取prev元素后面紧跟着的next元素	元素集合	$(“h1 + p"): 选择<h1>元素后面紧跟着的<p>元素
$(“prev ~ siblings”)	匹配prev元素后面所有的siblings兄弟元素	元素集合	$(“h1 ~ p”): 选择<h1>后面所有的<p>元素

3.1jQUery过滤选择器

基本过滤选择器

基本过滤选择器	功能	返回值	示例
:first	选取第一个元素	单个元素	$(".xdl:first"): 选取所有class值为"xdl"中的第一个元素
:last	选取最后一个元素	单个元素	$(".xdl:last"): 选取所有class值为"xdl"中的最后一个元素
:not(selector)	去掉所有与给定选择器匹配的元素	元素集合	$(“li:not(.xdl)”): 选取所有<li>元素，其中不包含class值为".xdl"的元素
:even	选取索引值是偶数的所有元素,索引值从0开始	元素集合	$(".xdl:even"): 选取索引是偶数的所有class值为".xdl"的元素
:odd	选取索引值是奇数的所有元素,索引值从0开始	元素集合	$(".xdl:odd"): 选取索引是奇数的所有class值为".xdl"的元素
:eq(index)	选取索引值等于index的元素,索引值从0开始	单个元素	$(“li:eq(1)”): 在所有<li>元素中选取索引值为1的元素
:gt(index)	选取索引值大于index的元素,索引值从0开始	单个元素	$(“li:gt(1)”): 在所有<li>元素中选取索引值大于1的元素
:lt(index)	选取索引值等于index的元素,索引值从0开始	单个元素	$(“li:lt(1)”): 在所有<li>元素中选取索引值小于1的元素
:header	选取所有的标题元素	元素集合	$(":header"): 选取网页中所有的<h_n>标题元素
:animated	选取当前正在执行动画的所有元素	元素集合	$(“div:animated”): 选取正在执行动画的<div>元素
:lang	选取指定语言下的所有元素	元素集合	$(“div:lang(en)”): 选取所有的<idv lang=“en”> 或 <div lang=“en-us” >
:focus	选取当前获取焦点的元素	单个元素	$(“input:focus”): 选取当前获取焦点的<input>元素
:root	选取该文档的根元素	单个元素	$(":root"): 永远都是<html>元素

内容过滤选择器

内容过滤选择器	功能	返回值	示例
:contains(text)	选取含有文本内容为text的元素	元素集合	$(“div:contains(‘mylove’)”): 选取含有文本"mylove"的<div>元素
:empty	选取不包含子元素或文本元素的空元素	元素集合	$(“div:empty)”): 选取不包含子元素或文本元素的<div>元素
:has(selector)	选取含有文本内容为text的元素	元素集合	$(“div:contains(‘mylove’)”): 选取含有文本"mylove"的<div>元素
:parent	获取含有子元素或文本元素的非空元素	元素集合	$(“div:parent”): 获取含有子元素或文本元素的<div>元素

可见性过滤选择器

可见性过滤选择器	功能	返回值	示例
:hidden	获取所有的不可见元素，包括CSS属性中的display:none和visibiity:hidden;input元素属性为type=hidden	元素集合	$(“input:hidden”): 选取所有的不可见<input>元素, 包括<input style=“display:none”>、<input style=“visibility:hidden”>、<input type=“hidden”>
:visible	获取所有可见元素	元素集合	$(“input:visible”):选取所有可见的<input>元素

属性过滤选择器

属性过滤选择器	功能	返回值	示例
[attribute]	选取包含此属性的元素	元素集合	$(“div[id]”):选取包含id属性的<div>元素
[attribute=value]	选取属性的值为value的元素	元素集合	$(“div[class=‘xdl’]”):选取所有class值为’xdl’的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	元素集合	$(“div[class!=‘xdl’]”):选取所有class值不为’xdl’的<div>元素
[attribute…^=value]	选取属性的值以value开头的元素	元素集合	$(“div[class^=‘xdl’]”):选取所有class值以’xdl’开头的<div>元素
[attribute$=value]	选取属性的值以value结尾的元素	元素集合	$(“div[class$=‘xdl’]”):选取所有class以’xdl’结尾的<div>元素
[attribute*=value]	选取属性的值中包含value的元素	元素集合	$(“div[class*=‘xdl’]”):选取所有class包含值’xdl’的<div>元素
[selector1][selector2][selectorn]	获取同时满足多个属性的元素	元素集合	$(“div[class!=‘xdl’][page]”):选取class值为’xdl’并且包含page的<div>元素

子元素过滤选择器

子元素过滤选择器	功能	返回值	示例
:first-child	获取每个父元素的第一个元素	元素集合	$(“ul li:first-child”): 获取每个<ul>中的第一个<li>元素
:first-of-type	获取每个元素所有同级同名元素的第一个兄弟元素	元素集合	$(“li:first-of-type”): 获取每个<li>中的所有同级的<li>元素的第一个兄弟<li>元素
:last-child	获取每个父元素的最后一个元素	元素集合	$(“ul li:last-child”): 获取每个<ul>中的最后一个<li>元素
:last-of-type	获取每个元素所有同级同名元素的最后一个兄弟元素	元素集合	$(“li:last-of-type”): 获取每个<li>中的所有同级的<li>元素的最后一个兄弟<li>元素
:nth-child(index/even/odd/formula)	1.获取每个父元素的第index个元素2.获取每个父元素下的奇偶元素3.获取每个父元素下与“带n参数的表达式”相关的元素	元素集合	同理
:nth-last-child(index/even/odd/formula)	同:nth-child:不同的是nth-last-child计数顺序为从最后一个元素开始到第一个元素	元素集合	同理
:nth-of-type(index/even/odd/formula)	同理	同理
:nth-last-of-type(index/even/odd/formula)	同理	同理
:only-child	获取所有父元素中只有唯一一个子元素的元素集合	元素集合	$(“ul li:only-child”): 获取每个<ul>中的只有唯一一个<li>元素的元素集合
:only-of-type	获取在同一级下只有唯一一个同名元素的元素集合	元素集合	$(“li:only-of-type”): 获取所有在同一级下只有唯一一个<li>元素的元素集合

表单对象属性过滤选择器

表单对象属性过滤选择器	功能	返回值	示例
:enable	获取所有可用元素	元素集合	$("#form:enable"): 选取id值为form的表单中所有可用的元素
:disable	获取所有不可用元素	元素集合	$("#form:disable"): 选取id值为form的表单中所有不可用的元素
:checked	获取所有被选中的元素(包括单选框，复选框)	元素集合	$(“input:checked”): 选取所有被选中的<input>元素
:selected	获取所有被选中的选项元素	元素集合	$(“select:selected”): 选取所有被选中的<select>元素

表单选择器

表单选择器	功能	返回值	示例
:input	选取所有的<input>、<textarea>、<select>、<button>元素	元素集合	$("#form:input"): 选取id为form元素下的所有<input>、<textarea>、<select>、<button>元素
:text	选取所有的单行文本框	元素集合	$(":text"): 选取所有的单行文本框
:password	选取所有的单行文本框	元素集合	同上
:radio	选取所有的单选框	元素集合	同上
:checkbox	选取所有的复选框	元素集合	同上
:submit	选取所有的提交按钮	元素集合	同上
:image	选取所有的图片按钮	元素集合	同上
:reset	选取所有的重置按钮	元素集合	同上
:button	选取所有的按钮	元素集合	同上
:file	选取所有的上传域	元素集合	同上
:hidden	选取所有的不可见元素	元素集合	同上

3.2属性节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性和属性操作</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        /*
        * 1.什么是属性？
        * 对象身上保存的变量就是属性
        * 2.如何操作属性
        * 对象.属性名称 = 值
        * 对象["属性名称"] = 值
        * 3.什么是属性节点
        * 在编写HTML代码时，在HTML标签中添加的属性就是属性节点
        * 所有的属性节点都保存在dom元素中的attribute中
        * 4.如何操作属性节点
        * DOM元素.setAttribute("属性名称", "值")
        * DOM元素.getAttribute("属性名称")
        * 5.属性和属性节点有什么区别？
        * 任何对象都有属性，但是只有DOM对象有属性节点
        * */
        // function Person() {
        //
        // }
        //
        // var p = new Person();
        // p.name = "zfr";
        // p["name"] = "zfr";
        $(function () {
	        var span = document.getElementsByTagName("span")[0];
	        span.setAttribute("name", "rfz");
	        console.log(span.getAttribute("name"));
	        $("span[name=rfz]").html("nihao");
        });

    </script>

</head>
<body>
    <span name="zfr"></span>
</body>
</html>

3.3jQuery attr方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery attr方法</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            /*
            * 1.attr(name|pro|key,val|fn)
            * 作用：获取或者设置属性节点的值
            * 如果传递一个参数代表获取属性节点的值
            * 如果传递两个参数代表设置属性节点的值
            * 注意点：
            * 如果是获取：无论找到多少个元素，都只会返回第一个元素元素指定的属性节点的值
            * 如果是设置：无论找到多少个就会设置多少个
            * 如果设置的属性节点不存在，那么系统会自动新增
            *
            * 2.removeAttr(name)
            * 删除属性节点
            * 注意点：会删除所有找到元素指定的属性节点
            * */
            console.log($("span").attr("class"));
            $("span").attr("class", "box");
            $("span").attr("abc", "123");
            $("span").removeAttr("class name");
        });
    </script>

</head>
<body>
    <span class="span1" name="zfr"></span>
    <span class="span2" name="rfz"></span>
</body>
</html>

3.4jQuery prop()方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery prop方法</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            /*
            * 1.prop()
            * 2.removeProp()
            * 类似attr
            * 但是prop不仅能操作属性，还能操作属性节点
            * 
            * 官方推荐在操作属性节点时，具有true 和 false 两个属性的属性节点，如checked,selected 或者 disabled 使用 prop(),其他使用attr()
            * */
            // $("span").eq(0).prop("class1", "123");
            // $("span").eq(1).prop("class1", "123");
            // console.log($("span").eq(0).prop("class1"));
            //
            // $("span").removeProp("class1");
            console.log($("span").prop("checked"));     //true/false
            console.log($("span").attr("checked"));     //checked/underfined
        });
    </script>

</head>
<body>
    <span class="span1" name="zfr"></span>
    <span class="span2" name="rfz"></span>

    <input type="checkbox" checked>
</body>
</html>

3.5 prop attr练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery prop attr方法练习</title>
    <style>
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(":button").click(function () {
                // $("img").attr("src", $("input:eq(0)")[0].value);
	            $("img").prop("src", $("input:eq(0)")[0].value);
            });
        });
    </script>

</head>
<body>
<input type="text">
<button>切换图片</button>
<br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>

3.6jQuery 操作类相关方法操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery操作类相关方法</title>
    <style>
        .class1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .class2 {
            border: 5px solid blue;
        }
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            /*
            * 1.addClass(class | fn)
            * 作用：添加一个类
            * 如果需要添加多个，多个类名之间用空格隔开
            * 2.removeClass(class | fn)
            * 作用:删除类，其他同上
            * 3.toggleClass(class | fn[,sw])
            * 作用：切换类
            * 有就删除，没有就添加
            * */
            var btns = $("button");
            btns.eq(0).click(
            	function () {
		            $("div").addClass("class1 class2");
	            }
            );
	        btns.eq(1).click(
		        function () {
			        $("div").removeClass("class1");
		        }
	        );
	        btns.eq(2).click(
		        function () {
			        $("div").toggleClass("class2");
		        }
	        );
        });
    </script>

</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

3.7jQuery文本值相关操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery文本值相关操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            /*
                html([val|fn])
                text([val|fn])
                val([val|fn|arr])
            */
	        var btns = $("button");
	        btns.eq(0).click(
		        function () {
			        $("div").html("<p>我是段落</p><span>我是span</span>")
		        }
	        );
	        btns.eq(1).click(
		        function () {
			        $("div").html()
		        }
	        );
	        btns.eq(2).click(
		        function () {
			        $("div").text("<p>我是段落</p><span>我是span</span>")
		        }
	        );
	        btns.eq(3).click(
		        function () {
			        $("div").text();
		        }
	        );
	        btns.eq(4).click(
		        function () {
			        $("input").val("请输入");
		        }
	        );
	        btns.eq(5).click(
		        function () {
			        $("input").val();
		        }
	        );
	        btns.eq(6).click(
		        function () {
			        $("div").addClass("class1 class2");
		        }
	        );
	        btns.eq(7).click(
		        function () {
			        $("div").removeClass("class1");
		        }
	        );
        });
    </script>

</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>

3.8jQuery操作样式方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery操作样式方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <!--引入jQuery-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script>
		$(function () {
			//1逐个设置
			// $("div").css("width", "100px");
			// $("div").css("height", "100px");
			// $("div").css("background", "red");

			//2链式设置
			// $("div").css("width", "100px").css("height", "100px").css("background", "blue");

			//3.批量设置
			$("div").css({
			    width:"100px",
			    height:"100px",
			    backgroundColor:"red"
			});

			// 4获取样式值
            console.log($("div").css("width"));
		});
    </script>
</head>
<body>
<div></div>
</body>
</html>