1. Jquery操作DOM
1) Jquery操作DOM节点
1.1) 查找节点
1.2) 创建节点append()
1.3) 删除节点remove()
2) Jquery操作DOM节点属性
2.1) 查找属性
2.2) 设置属性
2.3) 删除属性
3) Jquery操作DOM节点样式
3.1) 获取样式
3.2) 设置样式
3.3) 追加样式
3.4) 移除样式
4) 设置和获取HTML，文本和值
4.1) 获取html，设置html
4.2) 获取文本，设置文本
4.3) 获取值，设置值
5) 遍历节点操作
5.1) 获取所有子节点children()
5.2) 获取邻近的下一个兄弟节点next()
5.3) 获取邻近的上一个兄弟节点prev()
6) Jquery操作DOM节点CSS
6.1) 获取DOM节点CSS样式
6.2) 设置DOM节点CSS样式
chap03/demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 操作DOM节点
// 1，查找节点
/* var li2 = $("ul li:eq(1)");
var li2_txt = li2.text();
alert(li2_txt); */
// 2，创建节点
/* var li1 = $("<li title='这是马化腾'>马化腾</li>");
var li2=$("<li title='这是李彦宏'>李彦宏</li>");
var li22=$("ul li:eq(1)");
$("ul").append(li1);
li2.insertAfter(li22); */
// 3，删除节点
// $("ul li:eq(1)").remove();
// 操作DOM属性
// 获取属性
/* var li2=$("ul li:eq(1)");
var li2_attr=li2.attr("title");
alert(li2_attr); */
// 设置属性
// $("ul li:eq(1)").attr("title","你懂的");
// 删除属性
// $("ul li:eq(1)").removeAttr("title");
// 操作DOM节点样式
// 获取样式
/* var li2=$("ul li:eq(1)");
var li2_class=li2.attr("class");
alert(li2_class); */
// 设置样式
// $("ul li:eq(1)").attr("class","lc2");
// 追加样式
// $("ul li:eq(1)").addClass("lc3");
// 移除样式
// $("ul li:eq(1)").removeClass("lc");
// 设置和获取HTML，文本和值
// 获取html
/* var l1_html=$("ul li:eq(0)").html();
alert(l1_html); */
// 设置html
// $("ul li:eq(0)").html("<font color=red>哈哈</font>");
// 获取文本
/* var l1_text=$("ul li:eq(0)").text();
alert(l1_text); */
// 设置文本
// $("ul li:eq(0)").text("呵呵");
// 遍历节点
// children()
/* var b=$("body").children();
alert(b.length);
var u=$("ul").children();
alert(u.length);
for(var i=0;i<u.length;i++){
// alert(u[i].innerHTML);
alert($(u[i]).html());
} */
// next()
/* var l=$("ul li:eq(1)").next();
alert(l.html()); */
// prev()
/* var l=$("ul li:eq(1)").prev();
alert(l.html()); */
// CSS-DOM操作
// 获取css样式
/* var c=$("#jq").css("color");
alert(c); */
// 设置css样式
$("#jq").css("color","blue");
});
function getUserName(){
var userName=$("#userName").val();
alert(userName);
}
function setUserName(){
$("#userName").val("你懂的");
}
</script>
</head>
<style type="text/css">
.lc {background-color: red;}
.lc2 {background-color: blue;}
.lc3 {font-weight: bold;}
</style>
<body >
<p>你最喜欢的名人是？</p>
<ul>
<li title="这是乔布斯"><font color="green">乔布斯</font></li>
<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>
<p id="jq" style="color: red">Jquery掉渣天</p>
</body>
</html>
分享到：
相关推荐
**jQuery操作DOM解析** 在Web开发中，DOM（Document Object Model）是HTML或XML文档的结构化表示，它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作，提供了丰富的API来处理...
Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt
在深入探讨jQuery操作DOM的详细知识点之前，先简要介绍一下jQuery。jQuery是一个高效、简洁的JavaScript库，它极大地简化了JavaScript代码的编写，特别是在处理HTML文档对象模型（DOM）、事件处理、动画效果以及Ajax...
《利用面向对象管理者模式思想结合jQuery操作DOM树制作的植物大战僵尸》 在JavaScript开发领域，游戏开发是一项挑战性极高的工作，它需要开发者具备深厚的编程基础、良好的逻辑思维以及对用户交互的深入理解。本...
**jQuery DOM操作** jQuery库是JavaScript的一个强大工具，它极大地简化了对DOM（Document Object Model）的操作。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...
Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶
该文档包含了样式操作，内容及Value属性值操作，节点操作，节点属性操作，节点遍历操作的基础知识，也许不够详细，但内容也应该足够平时操作了，希望能帮到大家
**jQuery：DOM操作的JavaScript库** jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript对DOM（Document Object Model）的操作，同时也提供了丰富的事件处理、动画效果和Ajax交互功能。自2006...
接下来，我们将深入探讨 jQuery 在操作 DOM 方面的一些基本用法。 首先，使用 jQuery 选择器选取 DOM 元素是最基础的操作之一。jQuery 选择器能让我们快速选中页面中的元素，例如使用 `$("ul li:eq(1)")` 可以选取...
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
Dom是Document Object Model的缩写，意思是文档...DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件，本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件，需要的朋友参考下
在jQuery中，操作DOM（文档对象模型）是常见的任务，特别是在处理用户交互和表单数据时。本篇文章将深入探讨如何使用jQuery获取表单控件的值，这在Web开发中是非常关键的一部分。 首先，了解HTML属性与DOM属性之间...
jQuery 是一个广受欢迎的 JavaScript 库，其核心理念是简化 DOM 操作，处理事件和创建动画，同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...
在"jQuery DOM节点操作源码"中，我们可以深入理解jQuery是如何优雅地处理DOM（Document Object Model）节点的。以下是关于jQuery DOM操作的一些关键知识点： 1. **选择器**：jQuery 的核心功能之一就是强大的选择器...
本文将详细介绍如何使用jQuery来操作DOM，包括样式操作、内容操作、节点属性操作和DOM操作的分类。 首先，需要了解的是DOM（文档对象模型）是一种平台和语言无关的接口，它允许程序和脚本动态地访问和更新文档的...
动力节点Java学院整理的这篇文章将详细讲解如何使用 jQuery 进行 DOM 操作。 首先，文章指出 jQuery 选择器的强大之处在于它简单灵活，能够轻易获取和操作 DOM 元素。在原生 JavaScript 中，修改 DOM 元素的 CSS、...
DOM（Document Object Model）是HTML和XML文档的结构化表示，jQuery提供了简便的方法来操作DOM元素。例如，`$()`函数是jQuery的核心，它可以用来选择DOM元素，如`$("#elementID")`选择ID为"elementID"的元素，`$("....
2. **DOM操作**：jQuery提供了一系列方法用于DOM元素的增删改查。例如，`$(html)`可以创建新的DOM元素，`.append()`将内容添加到元素末尾，`.prepend()`则在元素开头插入内容，`.remove()`则删除元素。 3. **事件...
jQuery操作DOM节点、数组和字符串 jQuery表单验证 jQuery事件处理 jQuery页面导航（这部分内容较少，增加了几个纯CSS实现） jQuery视觉特效（这部分内容最丰富）。 每个实例都有简洁的注释，基本上原书的精髓都汇聚...