1、JQuery概念

JQuery是一个快速、简介的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

JavaScript框架:本质上就是一些js文件,封装了js的原生代码。

clp.js:
//封装方法,根据id获取元素对象
function $(id) {
    let obj = document.getElementById(id);
    return obj;
}

/*******************************************************************/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="js/clp.js"></script>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>

<script>
    //1、获取di元素对象
    let div1 = $("div1");
    let div2 = $("div2");

    //2、获取标签体内容
    alert(div1.innerHTML);
    alert(div2.innerHTML);
</script>

</body>
</html>

2、JQuery快速入门

2.1、步骤

  1. 下载JQuery。
    目前jQuery有三个大版本:
        1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
             功能不再新增。因此一般项目来说,使用1.x版本就可以了,
             最终版本:1.12.4 (2016年5月20日)
        2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
             功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
             最终版本:2.2.4 (2016年5月20日)
        3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
             一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
             目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
    
    jquery-xxx.js 与 jquery-xxx.min.js 区别:
        jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。
        jquery-xxx.min.js:生产版本。程序中使用,没有缩进,体积小一些,程序加载更快。
  2. 导入JQuery的js文件:导入xxx-min.js 文件。
  3. 使用。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery快速入门</title>
      <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    
    <script>
      //使用JQuery获取元素对象
      let div1 = $("#div1");
      alert(div1.html());
      let div2 = $("#div2");
      alert(div2.html())
    </script>
    
    </body>
    </html>

3、JQuery对象和JS对象的区别与转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和JS对象的转换</title>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>

<script>
  /**
   * 1、JQuery对象在操作时,更加方便;
   * 2、JQuery对象和JS对象方法不通用。
   * 3、两者相互转换
   *    * jquery --> js :jquery对象[索引] 或者 jquery对象.get(索引)
   *    * js --> jquery :$(js对象)
   */
  //1、通过js方式来获取名称叫div的所有html元素对象
  let divs = document.getElementsByTagName("div");
  alert(divs.length); //可以将其当作数组来使用
  //对divs中所有的div,让其标签体内容变为“aaa”
  for(var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = "aaa";
    $(divs[i]).html("ccc");
  }

  //2、通过jquery的方式来获取名称叫div的所有html元素对象
  let $divs = $("div");
  alert($divs.length); //可以将其当作数组来使用
  //对$divs中所有的div,让其标签体内容变为“bbb”,使用jquery方式
  // $divs.html("bbb");
  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "ddd";
</script>

</body>
</html>

4、选择器

选择器:筛选具有相似特征的元素(标签)。

基本语法学习:
1、事件绑定
2、入口函数
3、样式控制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件绑定</title>
  <script src="js/jquery-3.3.1.min.js"></script>

  <script>
    /**
     * window.onload 和 $(function) 区别
     *    * window.onload只能定义一次,如果定义多次,后边的会将前边的覆盖掉。
     *    * $(function)可以定义多次。
     */
    // $(function () {
    //   //给b1按钮添加单击事件
    //   //获取b1按钮
    //   alert("234");
    // });

    //jquery的入口函数(dom文档加载完成后执行该函数中的代码)
    $(function () {
      //给b1按钮添加单击事件
      //获取b1按钮
      $("#b1").click(function () {
        alert("abc");
      })
    });

    $(function () {
      // $("#div1").css("background-color","red"); //写法1
      $("#div1").css("backgroundColor","pink"); //写法2
    });
  </script>

</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>
<input type="button" value="点我" id="b1">

</body>
</html>

4.1、基本选择器

4.1.1、标签选择器

语法:
$("html标签名"):获得所有匹配标签名称的元素。

4.1.2、id选择器

语法:
$("#id的属性值"):获得与指定的id属性值匹配的元素。

4.1.3、类选择器

语法:
$(".class的属性值"):获得与指定的class属性值匹配的元素。

4.1.4、并集选择器

语法:
$("选择器1,选择器2,..."):获得多个选择器选中的的所有元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>

	<script type="text/javascript">
		$(function () {
			// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
			$("#b1").click(function () {
				$("#one").css("backgroundColor","pink")
			});

			// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
			$("#b2").click(function () {
				$("div").css("backgroundColor","pink")
			});

			// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
			$("#b3").click(function () {
				$(".mini").css("backgroundColor","pink")
			});

			// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
			$("#b4").click(function () {
				$("span,#two").css("backgroundColor","pink")
			});
		})

	</script>
   
	</head>
	<body>
	
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	   <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		 
		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>

		<input type="text" value="zhang" id="username" name="username">
	
	</body>
</html>

4.2、层级选择器

4.2.1、后代选择器

语法:
$("A B"):选择A元素内部的所有B元素。

4.2.2、子选择器

语法:
$("A > B"):选择A元素内部的所有B子元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
    <script type="text/javascript">
		$(function () {
			// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
			$("#b1").click(function () {
				$("body div").css("backgroundColor","pink");
			});

			// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
			$("#b2").click(function () {
				$("body > div").css("backgroundColor","pink");
			});
		});
	</script>
   
	</head>
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>

		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>

		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>

		<span class="spanone">    span
		</span>
		
	</body>
</html>

4.3、属性选择器

4.3.1、属性名称选择器

语法:
$("A[属性名]"):包含指定属性的选择器。

4.3.2、属性选择器

语法:
$("A[属性名='值']"):包含指定属性等于指定值的选择器。

4.3.3、复合属性选择器

语法:
$("A[属性名='值'][]..."):包含多个属性条件的选择器。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor", "pink");
            });

            // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor", "pink");
            });

            // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor", "pink");
            });

            // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor", "pink");
            });

            // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor", "pink");
            });

            // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor", "pink");
            });

            // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor", "pink");
            });
        });
    </script>

</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
<input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>

<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one" title="test02">
    class是 one title="test02"
    <div class="mini01">class是 mini01</div>
    <div class="mini" style="margin-top:0px;">class是 mini</div>
</div>

<div class="visible">
    这是隐藏的
</div>

<div class="one">

</div>

<div id="mover">
    动画
</div>

<input type="text" value="zhang" id="username" name="username">
</body>
</html>

4.4、过滤选择器

4.4.1、首元素选择器

语法:
:first:获得选择的元素中的第一个元素。

4.4.2、尾元素选择器

语法:
:last:获得选择的元素中的最后一个元素。

4.4.3、非元素选择器

语法:
:not(selecter):不包含指定内容的元素。

4.4.4、偶数选择器

语法:
:even:偶数,从0开始计数。

4.4.5、奇数选择器

语法:
:odd:奇数,从0开始计数。

4.4.6、等于索引选择器

语法:
:eq(index):指定索引元素。

4.4.7、大于索引选择器

语法:
:gt(index):大于指定索引元素。

4.4.8、小于索引选择器

语法:
:lt(index):小于指定索引元素。

4.4.9、标题选择器

语法:
:header:获得标题元素,固定写法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value="保存" className="mini" name="ok" className="mini"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>

            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });

        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one

</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

4.5、表单过滤选择器

4.5.1、可用元素选择器

语法:
:enabled:获得可用元素。

4.5.2、不可用元素选择器

语法:
:disabled:获得不可用元素。

4.5.3、选中选择器

语法:
:checked:获得单选/复选框选中的元素。

4.5.4、选中选择器

语法:
:selected:获得下拉框选中的元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        #job {
            margin: 20px;
        }
        #edu {
            margin-top: -70px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("aaa");
            });

            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaa");
            });

            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });

            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });
        });
    </script>
</head>

<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
<br><br>

<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>

<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br><br>

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>

<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>

<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>
<br/>

<div id="two" class="mini">
    id为two class是 mini div
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

5、DOM操作

5.1、内容操作

5.1.1、html()

html()::获取/设置元素的标签体内容
<a><font>内容</font></a> --> a标签的html内容:<font>内容</font>

5.1.2、text()

text()::获取/设置元素的标签体纯文本内容
<a><font>内容</font></a> --> a标签的text内容:内容

5.1.3、val()

val():获取/设置元素的value属性值。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            // 获取myinput 的value值
            let value1 = $("#myinput").val();
            //设置值
            $("#myinput").val("李四");

            // 获取mydiv的标签体内容
            let html = $("#mydiv").html();
            //设置内容
            $("#mydiv").html("aaa");

            // 获取mydiv文本内容
            let text = $("#mydiv").text();
            //设置文本内容
            $("#mydiv").text("bbb");
        });
    </script>

</head>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

5.2、属性操作

5.2.1、通用的属性操作

1、attr():获取/设置元素的属性

2、removeAttr():删除属性

3、prop:获取/设置元素的属性

4、removeProp():删除属性

*attr和prop的区别:

  • 如果操作的是元素的固有属性,则建议使用prop。
  • 如果操作的是元素自定义的属性,则建议使用attr。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            let name = $("#bj").attr("name");
            alert(name);

            //设置北京节点的name属性的值为dabeijing
            $("#bj").attr("name","dabeijing");
            name = $("#bj").attr("name");
            alert(name);

            //新增北京节点的discription属性 属性值是didu
            $("#bj").attr("description","didu");
            let disc = $("#bj").attr("description");
            alert(disc);

            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");

            //获得hobby的的选中状态
            let checked = $("#hobby").prop("checked");
            alert(checked);
        });
    </script>
</head>
<body>
<ul>
    <li id="bj" name="beijing" xxx="yyy">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html>

5.2.2、对class属性的操作

1、addClass():添加class属性值

2、removeClass():删除class属性值

3、toggleClass():切换class属性

4、css():

toggleClass("one"):
    如果元素对象上存在class="one",则将属性值one删除掉。
    如果元素对象上不存在class="one",则添加。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        .one {
            width: 200px;
            height: 140px;
            margin: 20px;
            background: red;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 40px;
            height: 40px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 40px;
            height: 40px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        /*待用的样式*/
        .second {
            width: 300px;
            height: 340px;
            margin: 20px;
            background: yellow;
            border: pink 3px dotted;
            float: left;
            font-size: 22px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            $("#b1").click(function () {
                $("#one").prop("class","second");
            });

            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });

            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });

            //<input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });

            //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function () {
                let backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);
            });

            //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function () {
                $("#one").css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<span class="spanone">    span
		</span>
</body>
</html>

5.3、CRUD操作

5.3.1、append()

append():父元素将子元素追加到末尾。
    *对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾。

5.3.2、prepend()

prepend():父元素将子元素追加到开头。
    *对象1.append(对象2):将对象2添加到对象1元素内部,并且在开头。

5.3.3、appendTo()

appendTo():
    *对象1.appendTo(对象2):将对象1添加到对象2元素内部,并且在末尾。

5.3.4、prependTo()

prpendTo():
    *对象1.appendTo(对象2):将对象1添加到对象2元素内部,并且在开头。

5.3.5、after()

after():添加元素到对应的元素后边。
    *对象1.after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系。

5.3.6、before()

before():添加元素到对应的元素前边。
    *对象1.before(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系。

5.3.7、insertAfter()

insertAfter():添加元素到对应的元素前边。
    *对象1.insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系。

5.3.8、insertBefore()

insertBefore():添加元素到对应的元素前边。
    *对象1.insertBefore(对象2):将对象1添加到对象2前边。对象1和对象2是兄弟关系。

5.3.9、remove()

remove():移除元素。
    *对象.remove():将对象删除掉。

5.3.10、empty()

empty():清空元素的所有后代元素。
    *对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性结点。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
            $("#b1").click(function () {
                //append
                // $("#city").append($("#fk"));
                //appendTo
                $("#fk").appendTo($("#city"));
            });

            // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
            $("#b2").click(function () {
                //prepend
                // $("#city").prepend($("#fk"));
                //prependTo
                $("#fk").prependTo($("#city"));
            });

            // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
            $("#b3").click(function () {
                //after
                // $("#tj").after($("#fk"));
                //insertAfter
                $("#fk").insertAfter($("#tj"));
            });

            // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
            $("#b4").click(function () {
                //before
                // $("#tj").before($("#fk"));
                //insertBefore
                $("#fk").insertBefore($("#tj"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>

<ul id="love">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>

<div id="foo1">Hello1</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
            $("#b1").click(function () {
                $("#bj").remove();
            });

            // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
            $("#b2").click(function () {
                $("#city").empty();
            });
        });
    </script>
</head>
<body>
<input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)" id="b2"/>

<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
</html>

6、JQuery高级

6.1、动画

三种方式显示和隐藏元素
    1、默认显示和隐藏方式
        1)show([speed],[easing],[fn])
            参数:
                speed:动画的速度。
                    三个预定义的值:slow、normal、fast。或表示动画时常的毫秒数值。
                easing:用来指定切换效果。
                    默认是“swing”,可用参数“linear”。
                        swing:动画执行时,效果是 先慢,中间快,最后又慢。
                        linear:动画执行时速度是匀速的。
                fn:在动画完成时执行的函数。
                    每个元素执行一次。
                    
        2)hide([speed],[easing],[fn])
        3)toggle([speed],[easing],[fn])
    2、滑动显示和隐藏方式
        1)slideDown([speed],[easing],[fn])
        2)slideUp([speed],[easing],[fn])
        3)slideToggle([speed],[easing],[fn])
    3、淡入淡出显示和隐藏方式
        1)fadeIn([speed],[easing],[fn])
        2)fadeOut([speed],[easing],[fn])
        3)fadeToggle([speed],[easing],[fn])
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {

        });

        //隐藏div
        function hideFn() {
            // $("#showDiv").hide("slow","swing",function() {
            //     alert("隐藏了");
            // });
            // $("#showDiv").hide("fast","swing");

            //滑动方式
            // $("#showDiv").slideUp("fast");

            //淡入淡出方式
            $("#showDiv").fadeOut("fast");
        }
        //切换显示和隐藏div
        function toggleFn() {
            // $("#showDiv").toggle("fast","swing");

            //滑动方式
            // $("#showDiv").slideToggle("fast");

            //淡入淡出方式
            $("#showDiv").fadeToggle("fast");
        }
        //显示div
        function showFn() {
            // $("#showDiv").show("slow","swing",function() {
            //     alert("显示了");
            // });
            // $("#showDiv").show("fast","swing");

            //滑动方式
            // $("#showDiv").slideDown("fast");

            //淡入淡出方式
            $("#showDiv").fadeIn("fast");
        }
    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

6.2、遍历

1、JS的遍历方式
    for(初始化值;循环结束条件;步长){}

2、JQuery的遍历方式
    方式1:JQuery对象.each(callback)
    方式2:$.each(object, [callback])
    方式3:for...of:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /**
         * 1、JS的遍历方式
         for(初始化值;循环结束条件;步长){}

         2、JQuery的遍历方式
         方式1:JQuery对象.each(callback)
         方式2:$.each(object, [callback])
         方式3:for...of:
         */

        $(function () {
            //1\获取所有的ul下的li
            let citys = $("#city li");

            // //JS方式:
            //2\遍历li
            // for(var i = 0; i < citys.length; i++) {
            //     if("上海" == citys[i].innerHTML) {
            //         break; //结束循环
            //     }
            //     //获取内容
            //     alert(i+":"+citys[i].innerHTML);
            // }

            //JQuery的方式1:JQuery对象.each(callback)
            // citys.each(function (index,element) {
            //     //获取li对象的第一种方式:this
            //     // alert(this.innerHTML);
            //
            //     //判断如果是上海,则结束循环
            //     if("上海" == $(element).html()) {
            //         //如果当前function返回为false,则结束循环,如果返回为true,则继续.
            //         return false; //相当于break
            //         // return true; //相当于continue
            //     }
            //
            //     //获取li对象的第二种方式:在回调函数中定义参数 index(索引) element(元素对象)
            //     alert(index+":"+$(element).html());
            //     // alert(index+":"+element.innerHTML);
            // });

            //JQuery的方式2:$.each(object, [callback])
            // $.each(citys,function () {
            //     //JQuery方式一写法相同
            //     alert($(this).html());
            // });

            //JQuery的方式3:for...of: --> JQuery 3.0 版本之后提供的方式
            // for(li of citys) {
            //     alert($(li).html());
            // }
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

6.3、事件绑定

JQuery事件的绑定方式:
    方式1:标准的绑定方式:
        JQuery对象.事件方法(回调函数);

    方式2:on绑定事件 / off解除绑定
        JQuery对象.on("事件名称",回调函数);
        JQuery对象.off("事件名称");
    方式3:事件切换:toggle
        JQuery对象.toggle(fn1, fn2,...);
            当单击JQuery对象对应的组件后,会执行fn1,第二次点击会执行fn2,..,循环往复
            注意:1.9 版本 .toggle()方法删除,JQuery Migrate(迁移)插件可以恢复此功能。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //1\获取name对象,绑定click事件
            $("#name").click(function () {
                alert("我被点击了..")
            });

            //给name绑定鼠标移动到元素之上事件,绑定鼠标移出事件
            // $("#name").mouseover(function () {
            //     alert("鼠标来了...");
            // });
            // $("#name").mouseout(function () {
            //     alert("鼠标走了...");
            // });
            //链式编程,简化操作
            // $("#name").mouseover(function () {
            //     alert("鼠标来了..");
            // }).mouseout(function () {
            //     alert("鼠标走了..");
            // });
            alert("我要获得焦点了");
            // $("#name").focus(); //让文本输入框获得焦点
            // 表单对象.submit(); //让表单直接提交
        });

    </script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //1\使用on给按钮绑定单击事件
            $("#btn").on("click",function () {
                alert("我被点击了..");
            });

            //2\使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn按钮的单击事件
                $("#btn").off("click");
                // $("#btn").off(); //将组件上的所有事件全部解绑
            });
        });

    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //获取按钮,调用toggle方法
           $("#btn") .toggle(function () {
               //改变div背景色backgroundColor 颜色为 green
               $("#myDiv").css("backgroundColor","green");
           },function () {
               //改变div背景色backgroundColor 颜色为 pink
               $("#myDiv").css("backgroundColor","pink");
           });
        });
    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色,再次点击红色
    </div>
</body>
</html>

6.4、案例

6.4.1、案例1:广告的显示和隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            /**
             * 需求:
             *      1\当页面子啊在玩,3秒后,自动显示广告
             *      2\广告显示5秒后,自动消失
             * 分析:
             *      1\使用定时器来完成:setTimeout(执行一次定时器)
             *      2\分析发现,JQuery显示和隐藏的的动画效果,其实就是控制display属性
             *      3\使用 show()/hide()方法来完成广告的显示.
             */
            //入口函数,在页面加载完成后,定义定时器,调用这两个方法
            $(function () {
                //定义定时器,调用adShow()方法 3秒后执行一次
                setTimeout(adShow,3000);
                //定义定时器,调用adHide()方法,8秒后执行一次
                setTimeout(adHide,8000);
            });

            //显示广告
            function adShow() {
                //获取广告div,调用show()方法
                $("#ad").show("slow");
            }
            //隐藏广告
            function adHide() {
                //获取广告div,调用show()方法
                $("#ad").hide("slow");
            }
        });

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

6.4.2、案例2:抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">

<script language='javascript' type='text/javascript'>
    /**分析:
     *      1\给开始按钮绑定单击事件
     *          1.1\定义循环定时器
     *          1.2\切换小相框的src属性
     *              定义数组,存放图片资源路径
     *              生成随机数,数组索引
     *      2\给结束按钮绑定单击事件
     *          1.1\停止定时器
     *          1.2\给大相框设置src属性
     */
    //准备一个一维数组,装用户的像片路径
    var imgs = [
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];
    var startId; //开始定时器的id
    var index; //随机的索引
    $(function () {
        //处理按钮是否可以使用的效果
        $("#startID").prop("disabled",false);
        $("#stopID").prop("disabled",true);

        //1\给开始按钮绑定单击事件
        $("#startID").click(function () {
            //定义循环定时器
            startId = setInterval(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);

                //生成随机索引 0-6
                index = Math.floor(Math.random() * 7); //0.000 - 0.999 --> *7 --> 0.0-6.999
                //设置小相框的src属性
                $("#img1ID").prop("src",imgs[index]);
            },20);
        });

        //2\给结束按钮绑定单击事件
        $("#stopID").click(function () {
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);

            //停止定时器
            clearInterval(startId);
            //给大相框设置src属性
            $("#img2ID").prop("src",imgs[index]).hide();
            //显示1秒之后
            $("#img2ID").show(1000);
        });
    });
</script>
</body>
</html>

6.5、插件

插件:增强JQuery的功能。

插件的实现方式:
    方式1:$.fn.extend(object);
        *增强通过JQuery获取的对象的功能。 $("#id")
    方式2:$.extend(object);
        *增强JQuery对象自身的功能。 $/JQuery
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //定义JQuery对象插件
        $.fn.extend({
            //定义了一个方法,所有的JQuery对象都可以调用该方法
            check:function() {
                //让复选框选中
                //this:调用该方法的JQuery对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中
                this.prop("checked",false);
            }
        });

        $(function () {
            //复选框对象.check();
            //获取按钮
            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();
            });
            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();
            });
        });
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>

<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值
        $.extend({
            max:function (a, b) {
                //返回两数中的较大值
                return a >= b ? a : b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a : b;
            }
        });

        //调用全局方法
        let max = $.max(2,3);
        let min = $.min(5,0);
        alert(max+"/"+min);
    </script>
</head>
<body>
</body>
</html>

 

版权声明:本文为aoe1231原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/aoe1231/p/16704964.html