jQuery使用心得浅谈jquery的应用

转载

mob6454cc667b1d 2023-11-20 00:53:39

文章标签 jQuery使用心得 java js html jQuery 文章分类 jQuery 前端开发

1.关于jQuery

什么是jQuery

jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

为什么使用jQuery

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。
其他优点：
（1）写少代码,做多事情【write less do more】（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法

2.jQuery里的对象

DOM对象

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展
标志语言的标准编程接口。通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

JavaScript 对象和 jQuery 对象

用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对
象的 API。用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，
我们都是将 JavaScript 对象转化成 Jquery 对象

DOM 对象转换 jQuery 对象

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以
使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
例：
新建 html 页面文件 domTojQuery.html
1.页面加入按钮 button

<body>
<div align="center">
<input type="button" id="btn" value=" 我要成为jQuery对象”οnclick="btnClick()"/>
</div>
</body>

2.转换 DOM 对象

<script type="text/ javascript" src="js/jquery_ 3.4.1.js"></script>
<script type="text/javascript">
   function btnClick(){
	    //使用js方法获取DOM对象
		var domBtn = document. getElementById("btn");
		alert("1=" + domBtn. value )
		//使用jQuery函数$() 把DOM对象转换jQuery对象
		var $btn =
		= $(domBtn);
		//调用jQuery方法val()
		alert("2=" + $btn.val());
	}
</script>

jQuery 对象转为 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]
1.页面添加 text ，button

<body>
	<div align="center">
		<input type="button" id="btn" value="计算平方”	οnclick="btnClick()"/>
		<input type="text" id="txt" value="输入 整数"/>
	</div>
</body>

jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象

<script type="text/ javascript" src="js/jquery_ 3.4.1.js"></script>
<script type="text/javascript">
		function btnClick(){
			//从jQuery对 象数组中,第0个对象为DOM对象
			//var domObj 二$("#txt"). get(0);
			var domObj = $("#txt")[0];
			//使用DOM对象的属性value
			var num =
			domObj . value ;
			dom0bj.value = num * num;
		}
</script>

3.选择器

选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

基本选择器

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象.
1.id 选择器
语法：$(“#id”)
2.class 选择器
语法：$(“.class 名称”)
3. 标签选择器
语法：$(“标签名”)
例：新建 selector.html
1.在页面 head 部分加入 css

<style type="text/css">
	div{
		background: gray;
		width: 200px;
		height:100px;
	}
</style>

2.加入 jQuery 引用

<script type="text/javascript" src="js/jquery_ 3.4.1.js"></script>

3.body 部分定义 div

<body>
	<div id="one" >我是id=one的div</div>
	<br>
	<div class="two">我 是class=two的div</div>
	<br>
	<div>我是没有id, class的div</div>
	<br>
	<span>我是一行数据</span>
	<br>
	操作按钮: <br>
	<input type="button" value="选取id=one" onclick="fun1()" />
	<input type="button" value="选取class=two" onclick="fun2()" />
	<input type="button" value="选取div" onclick="fun3()" />
</body>

4.创建 js 函数

<script type="text/javascript">
	function fun1(){
	$("#one"). css("background", "blue");
	}
	function fun2(){
	$(" . two").css("background" , "red")
	function fun3(){
	//所有的div, $("div") 是jQuery数组,对数组内全部成员统一处理
	$("div"). css("background" , "orange"); 
	}
</script>

所有选择器

语法$(“*”) 选取页面中所有 DOM 对象。

组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)
例：
1.上面的 selector.html 页面中加入按钮

<input type="button" value=" 所有DOM" onclick="fun4()" />
<input type="button" value=" 选取两个DOM对" onclick="fun5()" />

2.增加 js 函数

function fun4(){
	//页面中全部
	$("*").css("background", "yellow");
}
function fun5(){
	//id是one，标签<span>
	$("#one，span"). css("background","pink" )
}

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=“text”>
 <input type=“password”>
 <input type=“radio”>
 <input type=“checkbox”>
 <input type=“button”>
 <input type=“file”>
 <input type=“submit”>
 <input type=“reset”>

$(":tr"): 不能用，tr 不是 input 标签
语法： $(":type 属性值")
例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
例：
新建 form.html
页面定义元素

文本框: <input type="text" value="我是type=text"><br>
性别: <br>
<input type="radio" name="sex" value="man">男<br>
<input type="radio" name="sex" value="woman">女<br>
爱好: <br>
<input type="checkbox" value="bike">骑行<br>
<input type=" checkbox" value="football" >足球<br>
<input type=" checkbox" value="music" >音乐<br>
<br>
<p>功能按钮</p>
<input type="button" value="读取text值" onclick="fun1()"/>
<input type="button" value="读取radio值" onclick="fun2()"/>
<input type="button" value="读取checkbox" onclick="fun3()"/>

定义 js 函数

<script type= "text/javascript">
	function fun1(){
		var $obj = $(":text");
		//获取第一一个DOM对象的值
		alert( $obj.val() );
	}
	function fun2(){
		var $obj = $(":radio");
		for(var i=0;i<$obj.length;i++){
		//jQuery对象转为DOM对象
		var obj = $obj[i];
		alert (obj.value);
		}
	}
	function fun3(){
		var $obj = $(":checkbox");
		for(var i=0;i<$obj . length;i++){
		//jQuery对象转为DOM对象
		var obj = $obj[i];
		alert(obj. value);
		//jQuery对象的用法
		//alert( $($obj[i]).val() );
		}
	}
</script>

4.过滤器

jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系

<div>1</div> dom1
 <div>2</div> dom2
 <div>3</div> dom3
 $(“div”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。

基本过滤器

1.选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法：$(“选择器:last”)
3.选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
实例操作
1.定义样式

<style type="text/css ">
	div {
	background: gray;
	}
</style>

2.页面加入 div

<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>
我是第三个div-2
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<div>我是div-5</div>
<br> 
<span>我是span</span>
<br>
<p>功能按钮</p>
<input type="button" id="btn1" value="选择第一个div" /> <br>
<input type="button" id="btn2" value="选择最后一 个div" /><br>
<input type="button" id="btn3" value="选择索引等于3的div" /><br>
<input type="button" id="btn4" value="选择索引小于3的div" /><br>
<input type="button" id="btn5" value="选择索引大于3的div" /><br>

3.定义 js 函数

<script type="text/javascript">
	$(function(){
	//jQuery绑定事件
		$("#btn1").click(function(){
		$("div:first").css("background", "blue")
		})
		$( "#btn2").click(function(){
		$("div: last") .css("background", "pink") ; 
		})
		$(" #btn3"). click(function(){
		$("div:eq(3)").css("background" , "orange");
		})
		$(”#btn4"). click(function(){
		$("div:lt(3)"). css("background", "yellow");
		})
		$("#btn5").click(function(){
		$("div:gt(3)").css("background" , "yellow");
		})
	})
</script>

表单对象属性过滤器

1 . 选择可用的文本框
$(“:text:enabled”)
2.选择不可用的文本框
$(“:text:disabled”)
3.复选框选中的元素
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
选择器>option:selected
例：
创建 filterForm.html
页面：

<p>文本框</p>
<input type="text" id="text1" value="text1" /> <br>
<input type="text" id="text2" value="text2" disabled /><br>
<input type="text" id="text3" value="text3" /><br>
<input type="text" id="text4" value="text4" disabled /><br>
<br>
<p>复选框</p>
<input type="checkbo" value="游泳" />游泳<br>
<input type="checkbox" value="健身" checked />健身<br>
<input type="checkbox" value="电子游戏" checked />电子 游戏<br>
<br>
<p>下拉框</p>
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="sql">sql语言 </option>
</select>
<p>功能按钮</p>
<button id="btn1">所有可用的text设值hello</button> <br>
<button id="btn2"> 显示被选中的复选框的值</button><br>
<button id="btn3"> 显示下拉列表选中的值</button><br>

js 函数

<script type="text/javascript">
	$(function(){
	//jQuery绑定事件
	$("#btn1").click(function(){
		$(":text :enabled"). val("Hello")
		})
	$("#btn2").click(function(){
		var $obj = $(" :checkbox: checked") ;
	$obj.each( function(i,n){
		alert("第"+i+"个成员，DOM值是:”
		+n. value+" jQuery对象取值:"+ $(n).val());
		})
		})
	$("#btn3").click(function(){
		//有选中的第一-个select的option
		var $obj = $("select > option:selected");
		alert($obj.val() + "	"+$obj.text());
		//选择id=lang的select
		//var $obj=$("#lang>option:selected");
		//alert($obj.val()+" "+$obj.text());
		})
	})
</script>

5.函数

1.val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr 对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
例：
创建 fun1.html
样式

<style type="text/css">
	div {
	background: blue;
	}
</style>

页面：

<p>文本框val</p>
<input type="text" value="刘备"/><br>
<input type="text" value="关羽"/><br>
<input type="text" value="张飞"/><br>
<p>文本数据text</p>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<p>图片</p>
<img id=" img1" src="img/ex1.jpg" /><br>
<img id="img1" src=" img/ex2.jpg" /><br>
<p>功能按钮</p>
<button id="btn1">获取第一个文本框的值</button> <br>
<button id="btn2">设置所有 文本框为新值< /button><br>
<button id="btn3">获取div的所有文本</button><br>
<button id="btn4">获取第一个div的文本</button><br>
<button id="btn5">设置div新文本</button><br>
<button id="btn6">设 置img图片</button><br>

js 函数

<script type="text/javascript">
	$(function(){
		//jQuery绑定事件
		$(" #btn1"). click(function(){
		var txt = $(":text"). val();
		alert("我是多个text的第一个: "+txt);
		})
		$(" #btn2").click(function(){
		$(":text").val("王者荣耀还是三国志" )
		})
		$("#btn3") .click(function(){
		alert($("div"). text());
		})
		$(" #btn4").click(function(){
		alert( $("div:first"). text() )
		})
		$("#btn5").click(function(){
		$("div"). text("我是小强")
		})
		$("#btn6"). click( function(){
		alert($("img") .attr("src"))
		$("img").attr("srC",”img/ex3.jpg" ) ;
		})
	})
</script>

1.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div")
6.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
7.each
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
例：
新建 fun2.html
样式：

<style type= "text/css">
div {
background: blue;
}
</style>

页面

<p>show和hide</p>
<div id="one">我是one</div>
<div id="two">我是two</div>
<p>remove和empty</p>
<select>
<option>老虎</option>
<option>狮子</option>
<option>豹</option>
</select>
<br>
<select>
<option>大洋洲</option>
<option>欧洲</option>
<option>美洲</option>
</select>
<br>
<p>append</p>
<div id="father" style="background: red;">我是父div</div>
<br>
<p>html</p>
<span>mysql是一个<b>数据库</b></span><br>
<span>使用jdbc访问数据库</span><br>
<p>功能按钮</p>
<button id="btn1">隐藏所有 div</button> <br>
<button id="btn2"> 显示所有div</button><br>
<button id="btn3" >清除所有下拉列表中option子标签</button><br>
<button id="btn4">删除所有 下拉列表</button><br>
<button id="btn5" >添加元素</button><br>
<button id="btn6">获取第一个span文本内容</button><br>
<button id="btn7">设置span的内容</button><br>
<button id="btn8" >each循环< /button><br>
<option>欧洲</option>
<option>美洲</option>
</select>
<br>
<p>append</p>
<div id="father" style="background: red;">我是父div</div>
<br>
<p>html</p>

js 函数

$("#btn1"). click(function(){
	$("div").hide();
	})
$("#btn2"). click(function(){
	$("div"). show();
	})
$("#btn3"). click(function(){
	$("select") . empty();
	})
$(" #btn4"). click(function(){
	$("select").remove(); 
	})
$("#btn5").click(function(){
	$(" #father").append("<input type= ' text' value= '我是动态添加的input'/>");
	})
$("#btn6"). click(function(){
	alert($("span").html());
	})
$(”#btn7"). click(function(){
	$(" span").html("我是span标签" );
	})
$(" #btn8").click( function(){
	$("span").each(function(i,n){
	alert("索引:"+i+" "+ n. innerHTML )
	})
})

each 用法
页面上加入 text

<p>文本框val</p>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞"/><br>

加入三个按钮，创建点击事件

$("#9"). click(function(){
	//遍历数组
	var arr=["a","b","c"];
	$.each(arr , function(i,n){alert("数组下标: "+i+",成员是: "+n)})
})

$(" #btn10").click(function(){
	//遍历json对象
	var arr={name:"zhangsan" , age:20};
	$ . each(arr, function(i,n){alert("key是: "+i+", value是 : "+n)})
})
$("#btn11").click(function(){
	//遍历dom数组
	$.each($(":text")，function(i,n){alert("下标是: "+i+", dom的value是 : "+n.value)})
})

或者

$("#btn11").click(function(){
	//遍历dom数组
	$(":text").each(function(i,n){alert("下标是: "+i+", 	dom的value是 : "+n.value)})
})

6.事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作
定义元素监听事件
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$(“button”).click(fun1)
为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$(“tr”).mouseover(fun2)
on() 绑定事件
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
语法：$(选择器).on(event,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。
例：
新建 event.html
样式：

<style type="text/css">
	div {
	background: gray;
	width: 200px;
	height: 80px;
}
</style>

页面：

<body>
	<p>功能按钮</p>
	<button id="btn1">动态添Button< /button>
	<br><br>
	<div id="mydiv">
	</div>
	<p>可以click me</p>
</body>

js 函数

$(function(){
	$(" #btn1"). on("click" ,function(){
		$(”#mydiv") . append(
		"<button id= ' mybutton '>我是添加的NewButton< /button"
		);
		$(”#mybutton") . on("click", function(){
		alert("NewButton被点了");
		});
	})
	$("p") . on("click", { name :" zhangsan"}, function(event){
		// event.data 获取传入的参数event是自定义名称
		alert( event . data. name)
	})
})

7.AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get
和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象

$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, … } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ：布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data：规定要发送到服务器的数据，可以是：string，数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能
的类型
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。
$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回
$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$g

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：非x86多核架构是什么意思非x86架构防火墙

下一篇：spring boot 泛型 spring boot aspect

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯