<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.bg1{
background-color:green;
}
.txt{
color:blue;
}
</style>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div>
<a href='aa.html' title="alink">link</a>
</div>
<hr/>
<div>
<ul>
<li id="apple" title='click change to apple'>苹果</li>
</ul>
</div>
<div id="sel" style="border:1px"></div>
<hr/>
<i>点击我会被strong标签包裹</i> 中间
<i id="i2" title="click test wrap"> 另一个i</i>
<hr/>
<button id="b1" >交替变换样式</button>
<button id="b2" class="txt" >点击移除样式</button>
<hr/>
<font>css<font>
</BODY>
<script language="javascript" >
//alert($("a").attr("href")); //attr() 获取某个节点的属性
$("a").attr("title","link"); //设置属性
$("a").removeAttr("href"); //移除属性
//创建节点 $(html)
var $d1 = $("<li>香蕉</li>");
var $d2 = $("<li>橘子</li>");
var $d3 = $("<li title='梨'>梨</>");
var $d4 = $("<p>before1</p>");
var $d5 = $("<p>before2</p>");
var $d6 = $("<p>after1</p>");
var $d7 = $("<p>after2</p>");
var $d8 = $("<li>西瓜</li>");
var $d9 = $("<li>葡萄</li>");
//将节点追加到ul,在最后
$("ul").append($d1).append($d2);
$d3.appendTo($("ul"));
//在ul节点前节点
$("ul").before($d4);
$d5.insertBefore($("ul"));
//在ul节点后添加节点
$("ul").after($d6);
$d7.insertAfter($("ul"));
//在ul节点的内部最前面添加节点
$("ul").prepend($d8);
$d9.prependTo($("ul"));
//绑定click事件
$("ul li").click(function(){
//当点击li时,将当前li copy到id为sel的元素下
//如果要想把li所关联的事件行为一并复杂，给clone()方法传递参数true
$(this).clone(true).appendTo("#sel");
});
$("#sel").click(function(){
//当点击id为sel的div时，将当前元素移除（本身也移除），
//remove()方法返回结果是当前被移除元素
var $rm = $(this).remove();
//将被移除的元素添加到body下
$("body").append($rm);
})
$("#apple").click(function (){
//点击当前元素会被<li id='apple'>apple</li>所替换
$(this).replaceWith("<li id='apple'>apple</li>");
})
$("i").click(function(){
//将当前元素用<strong>标签包裹
$(this).wrap("<strong></strong>");
})
$("#i2").click(function(){
//将当前元素用font标签包裹
$(this).wrapAll("<font color='red'></font>");
//将当前元素内的内容用span包裹
$(this).wrapInner("<span style='background-color:#000000'></span>");
})
$("#b1").click(function(){
//交替样式显示，判断当前元素是否有该样式，有remove，没有add
$(this).toggleClass("bg1");
})
$("#b2").click(function(){
//移除当前元素制定的样式，如果不加参数，移除所有
$(this).removeClass("txt");
})
//获取样式 $().attr("class")
// 添加：(1)$().addClass("xx")添加制定的元素 ||
// (2)$().attr("class","xx")
// (1)是追加，（2）如果原来有是替换
//判断是否含有某样式 $().hasClass("xx");
/*
$().html() 等同于js的innerHTML
$().text() 等同于js的innerText
$().val() 等同于js的value属性
*/
/*
$().children() 当前元素的所有子元素
$().next() 下一个紧邻兄弟元素
$().prev() 上一个紧邻的兄弟元素
$().siblings() 所有的兄弟元素
//最近的匹配元素,搜先test itself，不会查找兄弟节点，逐级查找父节点
$().closest()
--alert($("li").closest("div").html());
*/
/*
$().css()和attr()方法一样使用
$().css("color"); //获取
$().css("color","red")//设置
*/
//一次设置多个css值
$("font").css({"fontSize":"30px",
"backgroundColor":"yellow",
"width":"100px"});
alert($("font").height()+" "+$("font").width());//高，宽
</script>
</HTML>
分享到：
相关推荐
《gQuery：精简版jQuery DOM操作库》 在Web开发中，jQuery以其强大的功能和易用性成为了JavaScript库的首选。然而，对于一些轻量级项目或者对加载速度有较高要求的应用，jQuery的体积可能会显得过大。为了解决这个...
**jQuery DOM操作** jQuery库是JavaScript的一个强大工具，它极大地简化了对DOM（Document Object Model）的操作。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式访问和修改页面内容。jQuery提供了丰富的...
jquery DOM操作，重点介绍DOM这个章节。
以下是关于jQuery DOM操作的一些关键知识点： 1. **选择器**：jQuery 的核心功能之一就是强大的选择器机制，它允许开发者通过CSS选择器、ID、类名、属性等来选取DOM元素。例如，`$("#myID")` 选择ID为"myID"的元素...
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
标题 "Pure JS (5.1)：在服务器端使用 JQuery DOM 和 JQuery Template" 暗示了这篇博客可能探讨如何在非浏览器环境，比如服务器端，利用JavaScript的JQuery库来处理DOM操作和模板渲染。虽然JQuery通常与前端开发关联...
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册（教辅） .pdf ...
jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 JavaScript 编程，特别是对文档对象模型（DOM）的操作。DOM 操作是 JavaScript 中一项基本而重要的技能，通过它可以实现对网页内容、结构和样式的动态控制。...
jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统，使得开发者能够更加高效地选取和操作...
这些方法使得jQuery在处理DOM操作时更加高效和灵活。通过这些API，开发者可以轻松地创建动态、交互式的网页，无需深入理解底层的DOM操作细节。在实际项目中，结合CSS选择器和事件处理，jQuery能够实现各种复杂的页面...
jQuery 是一个广受欢迎的 JavaScript 库，其核心理念是简化 DOM 操作，处理事件和创建动画，同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
以上就是本文对JQuery DOM操作之样式操作的知识点梳理。希望读者在阅读完本文后，能够掌握基本的JQuery样式操作方法，并能根据需要灵活地运用于实际开发中。如果有疑问或者需要进一步探讨，欢迎留言交流，作者也会...
jQuery中的DOM操作（1） jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很...
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
内容概要：本文档详细介绍了基于 JQuery 的 DOM 元素操作，涵盖了各种常见的网页元素操作技巧。具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、...
标题"jquerydom:这是尝试为jQuery写最小的DOM"表明这是一个尝试精简jQuery中DOM操作部分的项目，可能旨在理解和学习jQuery的核心DOM操作原理。 **DOM基础** DOM是HTML和XML文档的结构化表示，它允许程序和脚本动态...