jQuery基础（一）：选择器与DOM操作

最新推荐文章于 2024-04-17 09:18:10 发布

codeznker

最新推荐文章于 2024-04-17 09:18:10 发布

阅读量595

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cainiaomanong/article/details/86431024

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. jQuery的概念

jQuery是 John Resig 于2006创建的javascript开源函数库，凭借着简洁的语法和跨平台的兼容性（ie6），jQuery极大的简化了js的开发。jQuery的优势：

强大的选择器：jquery继承了css中选择器机制，避免了传统js中循环遍历节点获取DOM元素对象的过程
出色的DOM对象封装：jquery可以动态更新元素节点（element）以及元素节点的属性（attribute）
可靠的事件处理机制：在jquery中为元素对象绑定事件非常容易
完善的Ajax操作：jquery将js中的原生Ajax操作封装到了$.ajax()函数中，使得开发者只需要专注于业务逻辑，无需关心浏览器的兼容性以及XMLHttpRequest对象的创建和使用过程

要使用jquery只需要在页面的公共位置引入jquery库即可：

<!DOCTYPE html>
<html>
<head>
	<title>Hello jQuery!</title>
	<!-- 使用公共CDN加载jQuery函数库 -->
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

	<script type="text/javascript">
		// jQuery函数库中，$代表jQuery
		// ready()方法相当于传统javascript中的window.onload()方法，当时read()方法在DOM结构
		// 加载完毕之后就执行了，onload()方法必须等网页所有相关元素（图片）加载完毕才执行
		$(document).ready(function(){
			alert("Hello jQuery!");
		});
	</script>

</body>
</html>

$(document).ready() 方法可以简写为：

// 使用匿名函数作为参数传递给jQuery函数$()
$(function(){
    alert("Hello jQuery!");
});

jQuery对象和DOM对象的区别：

DOM对象是指通过原生js中通过getElementById() 等方法获取的元素对象，jQuery对象是指通过jquery方法封装后的元素对象，只有jQuery对象才能使用jquery库中的方法，例如$("#foo").innerHTML是错误的

/* dom对象和jquery对象的互换 */
var $variable = $("#foo");	// 获取jquery对象，返回的是一个jquery对象数组
var variable = $variable[0];	// 转为dom对象

var variable = document.getElementById("foo")	// dom对象的获取
var $variable = $(variable);	// 将dom对象包装为jquery对象

二. jQuery中的选择器

选择器是jquery的基础，在jquery中对于事件处理、DOM遍历、ajax操作都依赖于选择器，其核心思想是先要找到页面中的dom元素，然后改变dom元素的内容或者绑定效果。jquery的选择器技术继承自css，使用jquery选择器可以非常方便地找出页面中指定的jquery元素对象，添加相应的行为，避免了原生js的复杂遍历获取对象的过程。jquery选择器的优势是非常的简洁，$(#idName)就可以替代js中document.getElementById()函数。

jQuery中的选择器：jquery中的选择器种类非常多，主要分为获取jquery元素对象和过滤jquery元素对象。最常用的选择器是按dom元素的id属性或class属性来获取jquery对象，因为页面的中dom元素的id属性具有唯一性，所以这是最常用的。

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<span class="myClass">span class="myClass"</span>

<script type="text/javascript">
	$("#myDiv");	// 根据dom的id元素匹配获取jquery对象
    $(".myClass");	// 根据dom元素的class元素匹配获取jquery对象
</script>

jquery中还提供了很多辅助的选择器，这些选择器主要是用来过滤jquery对象的：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

<table>
  	<tr><td>Header 1</td></tr>
  	<tr><td>Value 1</td></tr>
  	<tr><td>Value 2</td></tr>
</table>

<script type="text/javascript">
	$("li:first");	// $("li")根据标签获取的是一个jquery对象数组，该选择器过滤出第一个元素
    
    $("tr:eq(1)");	// 根据给定的索引获取元素
</script>

除此之外，还有诸如子类选择器，属性匹配选择器，表单元素选择器…需要的时候可以参考文档

三. jQuery中的DOM操作

每个html页面都能使用dom树表示出来，而js又能动态地改变这个dom结构，再使用jquery操作dom元素的时候往往会动态地创建html内容，使得dom文档在浏览器中呈现效果发生变化（dom结构或元素节点发生变化）

元素节点查找：使用jquery选择器

<p class="myClass" title="shoppinglist">购物列表：</p>
<ul>
    <li title="牛肉">牛肉</li>
    <li title="洋葱">洋葱</li>
    <li title="苹果">苹果</li>
</ul>

<script type="text/javascript">
    // 元素节点查找
    var $li = $("ul li:eq(1)");     // 获取<ul>中的第二个节点元素
    var $li_txt = $li.text();       // 获取节点元素的文本内容
    alert($li_txt);
</script>

查找元素节点的属性值：使用attr()方法可以获取元素节点的属性值

// 获取元素节点的属性值
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);

创建节点：在dom操作中，常常要动态地创建html内容，append()方法用于将元素节点添加到dom树上

// 创建<li>元素节点，并将它作为<ul>元素的子节点添加到dom节点树上
var $li = $("<li title='鸡蛋'>鸡蛋</li>");	// 创建一个包含文本内容和属性的元素节点
$("ul").append($li);	// 将新创建的元素节点出入到dom文档树上

删除节点：romove()方法可以将文档中某个多余的元素节点删除，包括该节点所包含的所有后代元素，方法的返回值是指向该删除的节点的引用

var $li = $("ul li:eq(1)").remove();
$li.appendTo($li);	// 洋葱跑到苹果后面了，dom文档结构发生了变化

节点的替换：使用replaceWith()方法将所有匹配的元素都替换成指定的dom元素，如果被替换的元素节点绑定了事件也一起删除

$("li:eq(1)").replaceWith("<li title='橘子'>橘子</li>");

节点属性的操作：attr()方法可以用来获取和设置元素属性，removeAttr()方法用于删除元素属性

var $p = $("p");
var p_txt = $p.attr("title");  // 获取节点指定属性的属性值
console.log(p_txt);

// 设置节点的属性，attr()方法可以同时设置多个属性
$p.attr({"title":"购物清单", "name":"shopping!!!"});
console.log($p.attr("name"));	// 在控制台查看效果

操作节点的样式：class属性也是节点的属性，可以使用attr()方法来操作属性值，样式文件定义在css文件中，jquery中还提供了addClass()方法来追加样式，removeClass()用于移除指定样式

设置和获取html、文本和值：html()，text()，val()

// html()方法用于获取某个节点的html内容，类似js中的innerHTML属性
var p_html = $("p").html();
alert(p_html);

// text()方法用于读取和设置某个元素中的文本内容
var p_text = $("p").text();
console.log(p_text);

$("p").text("今天买点啥？");	// 设置节点的文本内容

val()方法：

<input type="text" id="address" value="请输入邮箱地址">
<input type="text" id="password" value="请输入邮箱密码">

<script type="text/javascript">
    // value()方法用于获取和设置文本框、下拉菜单、单选框的值
    $("#address").focus(function(){
    var txt_value = $(this).val();  // 获取节点的值
    if(txt_value == "请输入邮箱地址"){
        $(this).val("");    // 设置节点的值为空
    	}
	});
    
    $("#address").blur(function(){
    var txt_value = $(this).val();  // 获取节点的值
    if(txt_value == ""){
        $(this).val("请输入邮箱地址");
    	}
	});
</script>

codeznker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础（一）：选择器与DOM操作

一. jQuery的概念jQuery是 John Resig 于2006创建的javascript开源函数库，凭借着简洁的语法和跨平台的兼容性（ie6），jQuery极大的简化了js的开发。jQuery的优势：强大的选择器：jquery继承了css中选择器机制，避免了传统js中循环遍历节点获取DOM元素对象的过程出色的DOM对象封装：jquery可以动态更新元素节点（element）以及元...
复制链接

扫一扫