Web前端基础(16)jQuery操作HTML属性和元素

属性操作

在jQuery中,用attr()方法来获取和设置元素的属性,用removeAttr()方法来删除元素属性。

attr()方法使用示例

var $para = $("p");
//获取
var p_text = $para.attr("title");  
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

$("p").removeAttr("title");

样式操作

<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中,class其实也是p元素的一个属性,因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换(添加和删除)操作

另外判断是否有某个class值用方法hasClass()来判断。

设置html文本和值

html()方法

和JavaScript的innerHTML属性类似,我们可以使用html()方法来获取或者设置某个元素的内容。

alert($("p").html());
$("p").html("<strong>dp2px</strong>")

text()方法

和JavaScript中的innerText属性类似,可以用text()方法设置获取或者某个元素的文本内容。

val()方法

和JavaScript中的value属性类似,可以用val()方法来获取或者设置value属性的值。

遍历节点

children()方法

children只遍历直接子元素

var $ulc = $("ul").children();
for(var i = 0; i < $ulc.length; i++){
	alert($ulc[i].innerHTML);
}

next()和prev()方法

该方法用于取得匹配元素紧邻的同辈元素

siblings()方法

该方法用于取得匹配元素的前后所有同辈元素(不包含自己)

$(".level1 > a").click(function(){
    $(this).addClass("current")
        .next().show()
        //父元素的兄弟元素<a>移除"current"样式
        .parent().siblings().children("a").removeClass("current");
        return false;
});

closest()方法

该方法用于取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

比如,给点击的目标元素的最近的li元素添加颜色,可以这样:

$(document).bind("click", function(e){
    $(e.target).closest("li").css("color", "red");
})

closest() parent() parents()区别

方法描述
parent()获得集合中每个匹配元素的父级元素
parents()获得集合中每个匹配元素的祖先元素(多个层级)
closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素

CSS-DOM操作

在jQuery中直接使用css()方法获得和设置元素样式。

$("p").css("color");
$("p").css("color", "red");

此外在CSS-DOM中关于元素定位常用的方法

offset()方法

获得元素在当前视窗的相对偏移量,只对可见元素有效。

var offset = $("p").offset();
var left = offset.left; //获取左偏移量
var top = offset.top;  	//获取上偏移量

position()方法

获得定位属性设置为absolue或者relative的父节点的相对偏移。

var position = $("p").position();
var left = position.left;
var top = position.top;

scrollTop()和scrollLeft()

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。也可以出传入一个参数控制滚动条滚动到指定位置。

var $p = $("p");
var scrollTop = $p.scrollTop();
$("textarea").scrollTop(300);

图片提示效果

<div class="wrap">
    <ul>
        <li><a href="image/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="image/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="image/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="image/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="image/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="image/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="image/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="image/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>
</div>
*{margin: 0; padding: 0; border: 0}
ul{
    list-style: none;
}

.wrap{
    margin:150px;
}

.wrap ul li{
    display: inline;
    float: left;
    margin-right: 10px;
    border:1px solid #aaa;
}

#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
$(function(){
    var x = 10;
	var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;
        this.title = "";
        var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
        var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
        $(".wrap").append(tooltip);
        $("#tooltip")
            .css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show("fast");
    }).mouseout(function(){
        this.title =  this.myTitle;
        $("#tooltip").remove();
    }).mousemove(function(e){
        $("#tooltip")
            .css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            })
    })
})