jquery操作DOM对象

时间：2024-04-13 07:09:17
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
//设置透明度
<dl>
<dt><img src="images/lift_product_1.jpg" width="163" height="175" /></dt>
<dd><a href="#">天堂直杆彩虹伞</a></dd>
<dd class="price">￥35.6</dd>
<dd><span><a href="#">评论（1602） </a></span> <img
src="images/comment.gif" width="84" height="17" /></dd>
<dd>
<input name="" type="button" value="加入购物车" class="btn_long" />
<input name="" type="button" value="收藏" class="btn_short" />
<input name="" type="button" value="对比" class="btn_short" />
</dd>
</dl>
//使用css()添加边框效果
$(document).ready(function(){
$("dl").mouseover(function() {
$(this).css({"border":"5px solid
#f5f5f5","opacity":"0.5","cursor":"pointer"});
});
$("dl").mouseout(function() {
$(this).css({"border":"5px solid #fff","opacity":"1"});
});
});
2 、追加和移除样式
追加样式 
addClass(class)或addClass(class1 class2 … classN)
移除样式 
removeClass(“style2 ”)或removeClass("style1 style2 ")
removeClass() // 没有参数去除所有类样式
案例： 
<h2 class="style1" >addClass()可为元素追加多个类样式</h2>
$(document).ready(function(){
$("h2").click(function() {
$(this).addClass("style2 style3");
});
$("h2").mouseout(function() {
$(this).removeClass("style1 style2");
});
});
3 、切换样式
toggleClass()
模拟了 addClass() 与 removeClass() 实现样式切换的过程 
toggleClass(class)
.current{
color:#fff;
background-color:#0CF;
}
<dl>
<dt>新手上路</dt>
<dd><a href="#">注册登录</a></dd>
<dd><a href="#">易付宝账户激活</a></dd>
<dd><a href="#">易付宝实名认证</a></dd>
<dd><a href="#">密码相关</a></dd>
<dd><a href="#">会员购买</a></dd>
</dl>
$(document).ready(function(){
$("dd").click(function() {
$(this).toggleClass("current");
});
二、 jQuery 操作文本与属性 ( 内容操作 )
1 、 HTML 代码操作
html() 可以对 HTML 代码进行操作，类似于 JS 中的 innerHTML 
$("div.left").html();//获取元素中的html代码
//或
$("div.left").html("<div class='content'>…</div>");//设置元素中的html代码

案例：

<div id="mainbox">
<h1>飘飞雨絮</h1>
<div class="left"> <img src="images/headimg.jpg" width="100" height="100"
/>
<p>心情头像</p>
</div>
</div>
<input type="button" value="单击改变内容" />
$(document).ready(function(){
var html_txt=$("div.left").html();
alert(html_txt);
$("input[type=button]").click(function() {
$("div.left").html("<div class='content'><h2>良好的习惯从今天开始养
成！</h2></div>");
});
});
2 、文本操作
text() 可以获取或设置元素的文本内容 
$("div.left").text();//获取元素中的文本内容
//或
$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

案例：

$(document).ready(function(){
var html_txt=$("div.left").text();
alert(html_txt);
$("input[type=button]").click(function() {
$("div.left").text("<div class='content'><h2>良好的习惯从今天开始养
成！</h2></div>");
});
});
3 、 html() 和 text() 的区别
html() 和 text() 的区别如下：
语法
参数 功能
html() 无参数
用于获取第一个匹配元素的 HTML 内容或文 本内容
html(content)
content 参数为元素的 HTML 内容
用于设置所有匹配元素的 HTML 内容或文本 内容
text() 无参数 用于获取所有匹配元素的文本内容
text (content)
content 参数为元素的文本 内容
用于设置所有匹配元素的文本内容
4 、 Value 值操作
val() 可以获取或设置元素的 value 属性值 
val([val|fn|arr])
va l 要设置的值
function (index, value) 此函数返回一个要设置的值。接受两个参数， index 为元素在集合中的索
引位置， text 为原先的 text 值。
array 用于 check/select 的值 
$(this).val();//获取元素的value属性值
//或
$(this).val("要设的值");//设置元素的value属性值

案例：

<input name="" type="text" class="search_txt" value="空调" id="searchtxt" />
<input type="button" class="search_btn" />
$(document).ready(function(){
$("#searchtxt").focus(function(){ // 搜索框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value=="空调"){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#searchtxt").blur(function(){ // 搜索框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val("空调");// 如果符合条件，则设置内容
}
});
});
三、节点操作
jQuery 中节点操作主要分为： 查找节点，创建节点 ，插入节点 ，删除节点 ，替换节点 ，复制节点
1 、创建节点元素
工厂函数 $() 用于获取或创建节点
$(selector) ：通过选择器获取节点
$(element) ：把 DOM 节点转化成 jQuery 节点
$(html) ：使用 HTML 字符串创建 jQuery 节点 
//创建含文本与属性<li>元素节点
var $newNode2=$("<li title='标题为千与千寻'>千与千寻</li>");
2 、插入子节点
元素内部插入子节点

相关文章