JavaWeb之JQuery

Posted 2021-10-31 达少Rising

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb之JQuery相关的知识，希望对你有一定的参考价值。

一、JQuery 基础

1. 概念

一个javascript框架。简化JS开发
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

itcast.js

//封装方法，根据id来获取元素对象
function $(id){
    var obj = document.getElementById(id);
    return obj;
}

01-自定义js框架.html

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

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



<script>
    //1. 根据id获取元素对象
    //var div1 = document.getElementById("div1");
    //var div2 = document.getElementById("div2");
    var div1 = $("div1");
    var div2 = $("div2");
    //2.获取标签体内容
    alert(div1.innerHTML);
    alert(div2.innerHTML);
</script>

</body>
</html>

2. 快速入门

2.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的js文件：导入min.js文件
使用：var div1 = $("#div1");

02-JQuery快速入门.html

<!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获取元素对象
    var div1 = $("#div1");
   alert(div1.html());
    var div2 = $("#div2");

   alert(div2.html());

</script>

</body>
</html>

3. JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换
- jq – > js : jq对象[索引] 或者 jq对象.get(索引)
- js – > jq : $(js对象)

03-JQuery对象和js对象的转换.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和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. 通过js方式来获取名称叫div的所有html元素对象
    var 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. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");

  alert($divs.length);//也可以当做数组使用

  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery对象在操作时，更加方便。
        2. JQuery对象和js对象方法不通用的.
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
            * js -- > jq : $(js对象)
     */

</script>

</body>
</html>

4. 选择器

4.1.基本操作学习

事件绑定

//1.获取b1按钮
$("#b1").click(function(){
	alert("abc");
});

04-事件绑定.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        // 给b1按钮添加单击事件
       /* window.onload = function(){
            //1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });

        }*/
     /*   //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
       $(function () {
            //1.获取b1按钮
           $("#b1").click(function(){
               alert("abc");
           });
       });*/
       /* function fun1(){
            alert("abc");
        }

        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        //window.onload = fun2;
*/

      /* $(function(){
           alert(123);
       });

       $(function(){
           alert(234);
       });
*/


      $(function(){
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });
        /*
             window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
          */


    </script>

</head>
<body>

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




</body>
</html>

入口函数

$(function () {
	           
});

window.onload 和 $(function)区别
* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
* $(function)可以定义多次的。

样式控制：css方法

// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

4.2.分类

4.2.1.基本选择器

标签选择器（元素选择器）
- 语法：$("html标签名") 获得所有匹配标签名称的元素
id选择器
- 语法： $("#id的属性值")获得与指定id属性值匹配的元素
类选择器
- 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
并集选择器
- 语法： $("选择器1,选择器2....")获取多个选择器选中的所有元素

01-基本选择器.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: 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.2.层级选择器

后代选择器
- 语法：$("A B ")选择A元素内部的所有B元素
子选择器
- 语法：$("A > B") 选择A元素内部的所有B子元素

02-层级选择器.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: 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;
以上是关于JavaWeb之JQuery的主要内容，如果未能解决你的问题，请参考以下文章 
 前端面试题之手写promise
 动态SQL基础概念复习（Javaweb作业5）
 jQuery应用 代码片段
 Visual Studio 2012-2019的130多个jQuery代码片段。
 markdown 在WordPress中使用jQuery代码片段
 使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面