JavaWeb：JavaScript框架JQuery

最新推荐文章于 2022-09-04 18:48:02 发布
最新推荐文章于 2022-09-04 18:48:02 发布
阅读量341 收藏
点赞数
分类专栏： JavaWeb基础 文章标签： javascript jquery 原型模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z2658172512/article/details/125053900
版权

当当当当~~~~欢迎大家阅读，今天我们学习JavaScript框架JQuery

JQuery 基础

一：概念

首先我们先来了解JQuery是什么，做什么用

1：一个JavaScript框架。简化JS开发

2：JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架）。jQuery设计的宗旨    是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

3：JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

二：快速入门

(一)：步骤

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区别

1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

2. 导入JQuery的js文件：导入min.js文件

3. 使用

用JQuery的标识符$代替JQuery,简化书写

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

<script>
    //1.根据JQuery获取元素对象
    var div1 = $("#div1");
    alert(div1.html());
    var div2 = $("#div2");
    alert(div2.html());
</script>
</body>

三：JQuery对象和JS对象区别与转换

(一)：JQuery对象在操作时，更加方便
(二)：JQuery对象和js对象方法不通用的
(三)：两者相互转换

1:jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
2:js -- > jq : $(js对象)

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

<script>
//1.通过js方式来获取名称较div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(div.length);//可以将其当作数组来使用
    //对divs中所有的div让其标签体内容变为"aaa"
    for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML="aaa";
    //js -- > jq : $(js对象)
    $(divs[i]).html("ccc");
}

//2.通过jq方式来获取名称叫div的所有html元素对象
    var $divs=$("div");
    alert($divs.length);//也可以当作数组使用
    //对divs中所有的div让其标签体内容变为"bbb"使用jq方式
    $divs.html("bbb");
    //$divs.innerHTML="eee";

    //jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
    $divs[0].innerHTML="ddd";
    $divs.get(1).innerHTML="eee";
</script>
</body>

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

(一)：基本操作学习

1. 事件绑定

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

2. 入口函数

有两种方式：window.onload  和 $(function)

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

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

3. 样式控制：css方法

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

(二)：分类

1:基本选择器

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

 2:层级选择器

名称语法
后代选择器$("A B ") 选择A元素内部的所有B元素 
子选择器$("A > B") 选择A元素内部的所有B子元素
<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"/>
		$(function(){
			// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
			$("#b2").click(function () {
				$("body > div").css("backgroundColor","pink");
			});
		});
		
</script>

 3:属性选择器

名称语法
属性名称选择器 $("A[属性名]") 包含指定属性的选择器
属性选择器$("A[属性名='值']") 包含指定属性等于指定值的选择器
复合属性选择器$("A[属性名='值'][]...") 包含多个属性条件的选择器
<script type="text/javascript">
		 $(function(){
			 // <input type="button" value=" 含有属性title的div元素背景色为红色"  id="b1"/>
			 $("#b1").click(function(){
			 	$("div[title]").css("backgroundColor","pink");
			 });
		 });

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

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

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

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

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

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

</script>

4:过滤选择器

名称语法
首元素选择器 first 获得选择的元素中的第一个元素
尾元素选择器 last 获得选择的元素中的最后一个元素
非元素选择器not(selector) 不包括指定内容的元素
偶数选择器even 偶数，从 0 开始计数
奇数选择器odd 奇数，从 0 开始计数
等于索引选择器eq(index) 指定索引元素
大于索引选择器 gt(index) 大于指定索引元素
小于索引选择器 lt(index) 小于指定索引元素
标题选择器header 获得标题（h1~h6）元素，固定写法
<script type="text/javascript">
		$(function(){
			// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
			$("#b1").click(function () {
				$("div:first").css("backgroudColor","pink");
			});

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

			// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
			$("#b3").click(function () {
				$("div:not(.one)").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
			$("#b4").click(function () {
				$("div:even").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
			$("#b5").click(function () {
				$("div:odd").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
			$("#b6").click(function () {
				$("div:gt(3)").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
			$("#b7").click(function () {
				$("div:eq(3)").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
			$("#b8").click(function () {
				$("div:lt(3)").css("backgroudColor","pink");
			});
			// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
			$("#b9").click(function () {
				$(":header").css("backgroudColor","pink");
			});


		});
</script>

5:表单过滤选择器

名称语法
可用元素选择器 enabled 获得可用元素
不可用元素选择器 disabled 获得不可用元素
选中选择器 checked 获得单选/复选框选中的元素
选中选择器 selected 获得下拉框选中的元素
<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>

五：DOM操作

(一)：内容操作

1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
3. val()： 获取/设置元素的value属性值

<script>
			$(function () {
			// 获取myinput 的value值
				var value = $("#myinput").val();
				alert(value);
				$("#myinput").val("李四");
			// 获取mydiv的标签体内容
				var html = $("#mydiv").html("aaaa");
				alert(heml);
				$("#mydiv").html("aaaa");
			// 获取mydiv文本内容
				var text = $("mydiv").text();
				alert(text);
				$("mydiv").text("bbb");
			});
		
		</script>

 (二)：属性操作

1:通用属性操作

属性作用
attr()获取/设置元素的属性
removeAttr()删除属性
prop()获取/设置元素的属性
removeProp()删除属性
<script type="text/javascript">
		$(function () {
			//获取北京节点的name属性值
			var name = $("#bj").attr("name");
			alert(name);
			//设置北京节点的name属性的值为dabeijing
			$("#bj").attr("name","dabeijing");
			//新增北京节点的discription属性 属性值是didu
			$("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
			$("#bj").removeAttr("name");
            //获得hobby的的选中状态
			$("#hobby").prop("checked")
			alert(checked);

		});
	</script>

  attr和prop区别？

元素名称区别
prop如果操作的是元素的固有属性，则建议使用prop
attr如果操作的是元素自定义的属性，则建议使用attr

2:对class属性操作

属性作用
addClass()添加class属性值
removeClass()删除class属性值
toggleClass()切换class属性
css()美化页面
 <script type="text/javascript">
	
		 //<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 () {
			 var backgroundColor = $("#one").css("backgroundColor");
			 alert(backgroundColor);
		 });
		 //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
		 $("#b6").click(function () {
			 $("#one").css("backgroundColor","green");

		 });
		
		 
		 
	
	</script>

 toggleClass("one")： 

判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加

(三)：CRUD操作

方法格式含义
append()对象1.append(对象2)将对象2添加到对象1元素内部，并且在末尾
prepend()对象1.prepend(对象2)将对象2添加到对象1元素内部，并且在开头
appendTo()对象1.appendTo(对象2)将对象1添加到对象2内部，并且在末尾
prependTo()对象1.prependTo(对象2)将对象1添加到对象2内部，并且在开头
after()对象1.after(对象2)将对象2添加到对象1后边。对象1和对象2是兄弟关系
before()对象1.before(对象2)将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter()对象1.insertAfter(对象2)将对象2添加到对象1后边。对象1和对象2是兄弟关系
insertBefore()对象1.insertBefore(对象2）将对象2添加到对象1前边。对象1和对象2是兄弟关系
remove()对象.remove()将对象删除掉
empty()对象.empty()将对象的后代元素全部清空，但保留当前对象以及其属性节点
	 <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($("#city"));
			 });

		// <input type="button" value="将反恐插入到天津前面"  id="b4"/>
			 $("#b4").click(function () {
				 //before
				 $("#tj").before($("#fk"));
				 //insertBefore
				 $("#fk").insertBefore($("#tj"));
			 });
	  // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b5"/>
	        $("#b5").click(function () {
	            $("#bj").remove();
	       });
	 // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b6"/>
		    $("#b6").click(function () {
			    $("#bj").empty();
		    });
	});


		 });
</script>

 remove();和empty();的举例

<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 () {
			$("#bj").empty();
		});
	});
	   
	   
	
	</script>

 JQuery高级

一：动画

(一)：三种方式显示和隐藏元素

参数名称作用
speed动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值
easing

用来指定切换效果，默认是"swing"，可用参数"linear"

 swing：动画执行时效果是 先慢，中间快，最后又慢
 linear：动画执行时速度是匀速的

fn在动画完成时执行的函数，每个元素执行一次

1:默认显示和隐藏方式

1. show([speed,[easing],[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]])

 <script>
        //隐藏div
        function  hideFn() {
            /*$("#showDiv").hide("slow","swing",function () {
                alert("隐藏了...")
                });*/
                // $("#showDiv").hide(5000,"swing");
            //滑动方式
           // $("#showDiv").slideUp("slow");
            //淡入淡出
            $("#showDiv").fadeOut("slow");
        }
        function  hideFn() {
        }
        //显示div
        function  showFn() {
            /*$("#showDiv").show("slow","swing",function () {
                alert("显示了...")
            });*/
            //$("#showDiv").show(5000,"linear");
            //滑动方式
            //$("#showDiv").slideDown("slow");
            //淡入淡出
            $("#showDiv").fadeIn("slow");
        }
        //切换显示和隐藏div
        function toggleFn() {
                //默认方式
                //$("#showDiv").toggle("slow");
            //滑动方式
           // $("#showDiv").slideToggle("slow");
            //淡入淡出
            $("#showDiv").fadeToggle("slow");
        }
    </script>

 二：遍历

(一)：js的遍历方式

for(初始化值;循环结束条件;步长)

(二)：jq的遍历方式

1:jq对象.each(callback)

语法：
jquery对象.each(function(index,element){});

index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象 

2. 回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

 $(function () {
          /*  //1.获取所有的ul下的li
            var citys = $("#city li");
            //2.遍历li
            for (var i = 0; i < citys.length; i++) {
                if("上海"==citys[i].innerHTML){
                   // break;
                   // continue;//结束本次循环，继续下次循环
                }
                //获取内容
                alert(i+":"+citys[i].innerHTML);
            }*/

            //2.jq对象.each(callback)
         //citys.each(function (index,element) {
                //3.1获取li对象，第一种方式this
                //alert(this.innerHTML);
                //alert($(this).html());
                //3.2获取li对象，第二种方式，在回调函数中定义参数 index(索引）element(元素对象）
               // alert(index+":"+element.innerHTML);
               // alert(index+":"+$(element).html());

             /*  //判读如果是上海，则结束循环
               if("上海"==$(element).html()){
                   //如果当前function返回为false.则结束循环（break)
                   //如果当前function返回为true.则结束循环（continue)
                  // return false;
                   return true;
               }
               alert(index+":"+$(element).html());
         });*/

            /*//3.$each(object,[callback])
            $.each(citys,function () {
                alert($(this).html)
            });*/

            //4.for...of:jquery 3.0版本之后提供的方式
            for(li of citys){
                alert($(li).html);
            }
        });

 2:$.each(object, [callback])

3:for..of: jquery 3.0 版本之后提供的方式

for(元素对象 of 容器对象)

三：事件绑定

(一)：jquery标准的绑定方式

1:jq对象.事件方法(回调函数)

 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

//1.获取name对象，绑定click事件
            $("name").click(function () {
                alert("我被点击了...")
            });

(二)：on绑定事件/off解除绑定

1:jq对象.on("事件名称",回调函数)

jq对象.off("事件名称")
如果off方法不传递任何参数，则将组件上的所有事件全部解绑

//1.使用on给按钮绑定单击事件 click
            $("#btn").on("click",function(){
                alert("我被点击了...")
            });

(三)：事件切换：toggle

1:jq对象.toggle(fn1,fn2...)

当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

 <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>

四：插件：增强JQuery的功能

(一)：实现方式

1:$.fn.extend(object) 

增强通过Jquery获取的对象的功能  $("#id")

<script type="text/javascript">
        //使用jquery插件，给jq对象添加2个方法，check()选中所有复选框，uncheck()取消选中所有复选框

        //1.定义jquery的对象插件
        $.fn.extend({
            //定义了一个check()方法，所有的jq对象都可以调用该方法
            check:function () {
                //让复选框选中
                // alert(123);
                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            unchecked:function () {
                //让复选框不选中
                this.prop("checked",false);
            }
        });

        $(function () {
            //获取按钮
           // $("#btn-check").check();
            //复选框对象.check();
            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();

            });
            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();

            });

        });

</script>

2:$.extend(object)

增强JQeury对象自身的功能  $/jQuery

<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;
            }
        });
        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
</script>

以上就是JavaScript框架JQuery的内容啦，希望我的文章对你有所帮助，如果有错误的地方还望大家批评指正，谢谢大家阅读! 

 

*共清欢*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery框架类库基础部分学习 -JavaWeb
01-08
JQuery框架类库什么是 jQuery ?jQuery 核心思想:jQuery 流行程度:jQuery 好处:常见问题JQuery核心函数jQuery 对象和 dom 对象区分jQuery 选择器基本选择器层级选择器过滤选择器基本过滤器：内容过滤器：属性过滤器：...
什么是JQuery？JQueryScript的基本语法
H1453571548的博客
08-31 809
JQuery是一个JavaScript函数库;是一个轻量级的“写的稍做的多的javaScript库； JQuery功能有： 1、对于HTML元素的提取和操作 2、对于CSS的操作等 3、对于HTML的事件函数 4、javaScript特效和动画 5、HTMLDOM遍历和修改 6、AJAX 7、Utilties等等.........
Jquery自学总结
weixin_43281120的博客
11-09 287
JQuery 基础： 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的Java...
Jquery基础知识
web2001chu的博客
08-10 1605
jquery引入方式 本地引入 <script scr='jquery,.js'></script> 远程引入 <script scr==“http:// ajax.microsoft.com/ajax/jquery/ jquery-1.4.min.js”> jquery选择器 基本选择器 ${"#id"} id选择器 ${".class"} ${“div”} ${"*"} ${“div,span”} 层次选择器 $(“E1 E2”) 选择E1下所有E2 $(
jquery
weixin_44740410的博客
04-15 110
1.使用jquery的步骤 ①导入jquery库 ②写代码 2. 入口函数 window.onload=function(){} $(document).ready(function(){}); $(function(){}) 3.$的实质：就是一个函数，用法：①参数为函数，入口函数 ②参数为DOM对象，将DOM对象转换为jquery对象 ③字符串，获取jquery对象 4. jquery对象与j...
jQuery执行Script的方式
李尔摩斯de技术窝
09-16 1255
<br /><br />　　在jQuery中，有一个globalEval的和evalScript（此方法未绑定在jQuery对象中）的方法，用于执行Script语句，下面分分来讲一下<br /> <br />　　首先，说一下evalScript。evalScript方法传入的是一个<script>标签的DOM对象，一般是执行Script标签中的外部引用JS或内部JS语句。如果是一个引用外部的JS，那它直接执行一个AJAX，然后，把asyncy设置为false。如果是执行的Script语句，那就调用jQuer
javascript/jquery全过程详解
06-14
曾就职于上海花旗银行软件开发部担任项目经理多年,任职于国内等多家知名教育机构，精通javaweb， 前端技术，J2EE技术体系，熟练使用Spring、SpringMVC,Mybatis 、hibernate、struts等java和大数据框架。教学理念：...
当当网javaweb-SSM框架项目
01-17
当当网web项目，包含技术及相应框架：html、css、jsp、bootstrap、javaScript、JQuery、maven、tomcat、JDK1.8、SpringMVC、Spring、mybatis、Mysql等...(解压出来sql文件在主目录下)
javaweb开发源码-javascript_the_weird_parts:Javascript是现代开发人员需要知道并且非常了解的语言。真
05-19
Java Web开发源码javascript_the_weird_parts ...我们将深入研究诸如jQuery和Underscore之类的流行框架的源代码，以了解如何使用对Javascript的理解来学习（并借鉴）他人的优秀代码。 最后，您将学习如何构建自己的J
使用jQuery加载script脚本
weixin_34352449的博客
01-09 238
翻译人员: 铁锚 翻译日期: 2014年1月9日 原文日期: 2014年1月6日 原文链接:Loading Scripts withjQuery JavaScript loaders加载器简单强大而又非常有用。我在博客上介绍过其中一些,例如 curljs 和 LABjs ,也在个人项目中使用 RequireJS 和 Dojo 加载程序。他们是如此的强大,但在某些情况下可能...
JavaWeb之jQuery
少不入川。的博客
09-04 624
监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click。$(选择器) . 监听事件名称(处理函数) $("#id") . click(function(...))
jQuery
热门推荐
qq_44930306的博客
08-08 1万+
这里集合了一些jQuery的一些基础知识点！
基于javaweb+jsp的酒店人事管理系统(java+SSM+JSP+JQuery+Ajax+mysql)
m0_68415491的博客
03-28 257
基于javaweb+jsp的酒店人事管理系统(java+SSM+JSP+JQuery+Ajax+mysql) 一、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + mysql + Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持） 项目技术： JSP +Spring + SpringMVC + MyBatis + html+ css + JavaScript + JQuery + Ajax 等等 适用 课程设计，大作业，毕业设计，项目练习，
Java项目:建材商城系统(java+SSM+JSP+jQuery+mysql)
常年被追砍的博客
05-18 484
源码获取：俺的博客首页 "资源" 里下载！ 项目介绍 本项目分为前后台，前台为普通用户登录，后台为管理员登录； 管理员角色包含以下功能： 管理员登录,管理员管理,注册用户管理,新闻公告管理,建材类型管理,配货点管理,建材商品管理,建材订单管理,建材评价管理等功能。 用户角色包含以下功能： 查看我的订单,用户首页,网站公告,销售网络,用户登录注册,查看建材详情,查看购物车,下订单,查看订单并付款等功能。 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论.
Java项目:毕业设计管理系统(java+SSM+JSP+jQuery+mysql)
常年被追砍的博客
05-27 351
源码获取：俺的博客首页 "资源" 里下载！ 项目介绍 本项目包含三种角色：管理员、学生用户角色与教师角色。 管理员角色包含以下功能： 学生信息管理、教师信息管理。 用户角色包含以下功能： 查看通知公告,登录,登录后学生主页面,选择课题,选择课题后状态为等待老师去人状态,填写开题报告,提交中期检查,提交免答辩申请,上传论文等功能。 教师角色包含以下功能： 教师角色登录,教师首页,申报课题,审批学生选题,审核开题报告,审核中期检查,初审免答辩申请,审核论文是否过关,综合打分等功能。 环境需要 1.
JavaWeb——jQuery
一个憨憨写的胡言乱语
10-07 265
JavaWeb——jQuery1、介绍2、jQuery的使用2.1、jQuery的核心函数 1、介绍 也就是JavaScript和Query，是辅助JavaScript开发的JS类库，它的核心思想是，写的更少，做的更多，实现了很多浏览器的兼容问题。 2、jQuery的使用 2.1、jQuery的核心函数 是jQuery的核心函数，能完成jQuery的很多功能，是jQuery的核心函数，能完成jQuery的很多功能，是jQuery的核心函数，能完成jQuery的很多功能，{}就是调用$这个函数 传入
通过CDN引入jQuery的几种方式
baocuan8515的博客
07-04 2163
百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script ...
JavaWeb = jQuery使用详解
人生起落，生活苦甜，坚持追求！
04-10 755
jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。 特别值得一提的是基于jquery的插件非常丰富，大多数前端业务场景都有其封装好的工具框架 一。jQuery概述 1.jQuery概述 jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。 特别值得一提...
javaweb前端设计
最新发布
03-12
在JavaWeb前端设计中，常用的前端框架有Bootstrap、jQuery等，它们提供了丰富的UI组件和交互效果。 4. AJAX：AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器进行数据交互的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值