HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../script/jquery-1.10.1.js"></script> <style type="text/css"></style> <title>jQueryTest_0301</title> </head> <body> <p title="选择你喜欢吃的水果">选择你喜欢吃的水果</p> <ul> <li title="苹果">苹果</li> <li title="西瓜">西瓜</li> <li title="香蕉">香蕉</li> <li title="桔子">桔子</li> </ul> </body> </html>
1.查找节点(元素节点和属性节点)
<script type="text/javascript"> //查找元素节点 var $li = $("ul li:eq(2)"); //获取<ul>里第2个<li>节点 var li_txt = $li.text(); //获取第2个<li>节点的文本内容 //查找属性节点 var $param = $("p"); //获取<p>节点 var p_txt = $param.attr("title");//获取属性title的内容 </script>
2.创建节点
<script type="text/javascript"> var $li_01 = $("<li title='甜橙'>甜橙</li>");//创建一个<li>元素,包含元素结点和文本结点以及属性 $("ul").append($li_01); </script>
3.插入节点
插入节点方法:
append() | 向每个匹配的元素的内部追加内容 |
prepend() | 向每个匹配的元素的内部前置内容 |
after() | 向每个匹配的元素之后插入内容 |
before() | 向每个匹配元素之前插入内容 |
jQuery还提供了一些其它的插入方法:appentTo()、prependTo()、insertAfter()、insertBefore()
4.删除节点
jQuery提供了两种删除节点的方法:
● remove()方法:从DOM中删除所有匹配的元素
$("ul li:eq(2)").remove();//删除第二个<li>元素
● empty()方法:清空匹配元素中所有后代结点
$("ul li:eq(2)").empty();
5.复制节点
<script type="text/javascript"> $("ul li").click(function(){ $(this).clone().appendTo("ul"); }); </script>
6.替换节点
● replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素
● replaceAll():该方法作用与replaceWith()完全相同,只是颠倒了replaceWith()的操作
<script type="text/javascript"> $("ul li").click(function(){ var txt = $(this).text(); $(this).replaceWith("<li><strong>"+txt+"</strong></li>"); }); </script>
7.包裹节点
● wrap():将所有的元素进行单独包裹
● wrapAll():将所有匹配的元素用一个元素包裹起来
● wrapInner():将第一个匹配的元素的子内容(包括文本节点)用其它结构化的标记包裹起来
$("p").wrap("<b></b>");//用<b>元素将<p>元素包裹起来
8.属性操作
<script type="text/javascript"> var $para = $("p"); $para.attr("title","你最不喜欢吃的水果?"); var txt = $para.attr("title");//获得<p>元素属性title $para.removeAttr(title");//删除<p>的title属性 </script>
9.样式操作
addClass():追加样式
removeClass():移除样式
hasClass():判断是否含有某个样式
toggleClass():切换样式
<script type="text/javascript"> $("ul li:eq(0)").addClass("high"); $("ul li:eq(1)").addClass("another");//追加样式 $("ul li:eq(1)").removeClass("another");//移除样式 $("#changeButton").click(function(){ $("p").toggleClass("another"); }); </script>
10.设置和获取HTML、文本和值
● html()方法:读取或设置某个元素中的HTML内容
● text()方法:读取或设置某个元素中的文本内容
● val()方法:设置或获取元素的值,如果元素为多选,则返回一个包含所有选择的值的数组
<select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <input type="checkbox" value="check1">多选1</input> <input type="checkbox" value="check2">多选2</input> <input type="checkbox" value="check3">多选3</input> <input type="checkbox" value="check4">多选4</input> <input type="radio" value="radio1">单选1</input> <input type="radio" value="radio2">单选2</input> <input type="radio" value="radio3">单选3</input>
使用val()方法设置选中项:
<script type="text/javascript"> $("#single").val("选择3号"); $("#multiple").val(["选择2号","选择4号"]); $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); </script>
对于下拉列表框,在jQuery中,val()方法从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会选中。
11.遍历节点
● children()方法:取得匹配元素的子元素集合
● next()方法:取得匹配元素后面紧邻的同辈元素
● prev()方法:取得匹配元素前面紧邻的同辈元素
● siblings()方法:取得匹配元素前、后所有的同辈元素
● closest()方法:取得最近的匹配元素
相关推荐
**jQuery DOM操作** jQuery库是JavaScript的一个强大工具,它极大地简化了对DOM(Document Object Model)的操作。DOM是HTML和XML文档的结构化表示,允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...
3. jQuery 中DOM操作的分类: - 查找节点:使用jQuery选择器根据不同的条件查找页面中的元素节点。 - 创建节点:利用jQuery的工厂函数$(),可以根据传入的HTML字符串创建DOM对象,并将其包装为jQuery对象返回。例如...
在本篇关于jQuery中DOM操作和事件处理的文章中,我们将学习如何利用jQuery实现一个下拉框选项的动态转移功能。下拉框(select元素)作为网页中常见的表单控件之一,经常需要根据用户交互改变其选项。jQuery提供了一...
本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件 代码如下: 复制代码 代码...
本文实例讲述了jQuery中DOM操作原则。分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的。也就是说,某个方法既可...
以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器机制,它允许开发者通过CSS选择器、ID、类名、属性等来选取DOM元素。例如,`$("#myID")` 选择ID为"myID"的元素...
内容概要:本文档详细介绍了基于 JQuery 的 DOM 元素操作,涵盖了各种常见的网页元素操作技巧。具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、...
jQuery 是一个广受欢迎的 JavaScript 库,其核心理念是简化 DOM 操作,处理事件和创建动画,同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...
顺带把其中用到的操作和事件介绍下。 html代码: <input type=”text” id=”address” value=”请输入邮箱地址”/> jquery代码: 代码如下: $(document).ready(function(){ $(‘#address’).focus(function()...
压缩包中的"第5章 基础DOM和CSS操作.pdf"很可能是教程的电子版,详细讲解了jQuery如何进行DOM操作和CSS选择。而"code2", "code3", "code1"这些文件名可能是配套的代码示例,它们可能包含了实际的jQuery代码片段,...
- **缓存选择器结果**:如果一个元素在多次操作中重复使用,应存储选择器的结果,避免每次都重新计算。 - **事件委托(Event Delegation)**:使用`.on()`方法绑定事件时,尽量在更高层级的元素上绑定,减少事件...
Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶
jQuery中的DOM操作主要简化了JavaScript原生DOM操作的复杂性,提供了一套更简洁、易用的API。jQuery库使得开发者能够更容易地选取DOM元素、操作DOM结构以及处理事件。以下将详细介绍jQuery中的DOM操作核心知识点: ...
Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt
jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...
尽管随着Vue.js、React、Angular等现代前端框架的兴起,jQuery在某些场景下的使用频率有所下降,但其依然是许多项目中的基础工具,尤其在处理DOM操作和动画效果时,jQuery依然表现出色。对于初学者和有经验的开发者...