Jquery学习之常用操作

卑微远

已于 2022-04-16 09:46:06 修改

阅读量247

点赞数

分类专栏：前端文章标签： jquery javascript

于 2021-08-04 17:18:47 首次发布

本文链接：https://blog.csdn.net/Marshall_Ma/article/details/119388160

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、认识jquery
1）jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库。由美国人 John Resig 于2006 年 1 月发布。
2）jQuery 的理念是: 写得少, 做得多。它的优势是：轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的 Ajax、出色的浏览器兼容性、链式操作方式等。
3）认识 $ 符：
在 jQuery 库中，$是 jQuery 的简写形式，也就是它的别名。
$(“#app”)等价于 jQuery(“#app”)

4）jquery对象
<1> jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象，只有通过jQuery 对象才能调用 jQuery 中的方法
<2> jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可
以使用 jQuery 里的方法。例如: $(“#persontab”).html()
<3> jQuery 对象无法使用 DOM 对象的任何方法，DOM 对象也不能使用 jQuery 里的任何方法
<4> 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $
var $variable = jQuery 对象
var variable = DOM 对象
5）jQuery 对象转换 DOM 对象
<1> jquery对象是一个数组，可通过[index]数组下标的方法得到对应的DOM对象

var $btn = $("button");
var btnEle  = $btn[1];
btnEle.onclick = function(){
	alert("再点我！");
}

<button>点我</button>
<button>再点我</button>

<2> 使用jquery中的get(index)方法得到对应的DOM对象

var $btn = $("button");
var btnEle  = $btn.get(1);
btnEle.onclick = function(){
	alert("再点我！");
}

6）DOM 对象转换 jQuery 对象
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来，就可以获得一个
jQuery 对象，因为本来 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。DOM 对象转换成 jQuery 对象后就可以使用 jQuery 中的方法了。

var btnEle = document.getElementsByTagName("button")[1];
var $btn  = $(btnEle);
$btn.click(function(){
	alert("再点我！");
})

2、Hello World
1）所有jQuery操作都依赖于 jQuery库的支持，需先引入jar包！

<!DOCTYPE html>
<!-- 导入 jQuery 库，使用 scrip 标签的 src 属性 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function(){
			alert("Hello World!");
		})
	});
</script>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello World</title>
	</head>
	<body>
		<button>点我</button>
	</body>
</html>

2）加载文档
$(document).ready(function(){}); 作用相当于 JS 当中的 window.onload =
function(){}。
$(document).ready(function(){}); 可以简写为 $(function(){});
3）window.onload 和 $(document).ready()的区别
<1> 执行的时机不同:
window.onload 要等整个窗口（包括图片）都加载完才触发执行；
$(document).ready()在 DOM 结构绘制完成后就可执行。
<2> 编写的个数
window.onload 编写多个时，只有最后的那个起作用；
$(document).ready()可以编写多个，都生效。
<3> 简化写法
window.onload 无
$(document).ready()可简写为 $()
Tip：jQuery 中真正与 window.onload 完全等价的是 $(window).load()方法
3、jquery常用方法
1）、val()方法
<1> 返回 value 值：jQuery 对象.val()
对多选框而言：val()方法返回的是被选中的第一个值，而不是全部被选中的
值组成的数组。
<2> 设置 value 值：传入数组适应性更强
jQuery 对象.val(“value”)
2）each()方法，用来遍历一组元素
each(function(){
在函数体内使用 this 关键字引用当前正在被遍历的元素
this 永远是 DOM 对象
$(this)转为 jQuery 对象
});
3）text()方法
返回文本值：jQuery 对象.text()
设置文本值：jQuery 对象.text(“文本值”)
4）attr()方法
返回属性值：jQuery 对象.attr(“属性名”)
设置属性值：jQuery 对象.attr(“属性名”,“属性值”)
5）trim()方法：去除字符串前后空格
4、基本选择器
1）id 选择器：#id， $("#one")
2）class 选择器：.class， $(".mini")
3）选择元素名： $(元素名)， $(“div”)
4）所有元素： * ， $("*")
5）“,”表示并列关系 $(“span,#two”) 此时所有 span 元素和 id 为 two 的都会被选中
6）选择特定 class 属性的元素元素名.class $(“div.one”)
5、匹配某个name值select元素；
1）获取文本 $(“select[name=‘xxxx’] option:selected”).text();
2）对元素值xxx进行选定
$(“select[name=‘xxxx’] option[value=‘xxx’]”).attr(“selected”,“selected”);
例：根据select元素name属性对下拉框选项设置默认值

<script>
	window.onload=function(){
		var startHour = $('#startHour').val();
		var startMin = $('#startMin').val();
		var endHour = $('#endHour').val();
		var endMin = $('#endMin').val();
		$("select[name='effectiveHourFrom'] option[value='" + startHour + "']").attr("selected","selected");
		$("select[name='effectiveMinFrom'] option[value='" + startMin + "']").attr("selected","selected");
		$("select[name='effectiveHourTo'] option[value='" + endHour + "']").attr("selected","selected");
		$("select[name='effectiveMinTo'] option[value='" + endMin + "']").attr("selected","selected");
	}
</script>