DOM操作

之前已经学习过jQuery并将jQuery的Api看完，然后这次看了《锋利的jQuery》发现很多自己没去注意的属性，有一些是觉得常用就将其记下，一些是觉得容易出错的点，《锋利的jQuery》挺适合初学者，讲得较为通俗易懂。

获取属性和设置属性：attr()

var $para=$("p");//获取<p>节点
var p_txt=$para.attr("title");//获取<p>元素节点属性title
$("p").attr("title","name");//设置属性值

prop():获取在匹配元素集中的第一个元素的属性值
2. 删除属性：removeAttr()

$("p").removeAttr("title");//删除p元素的属性title

removeProp()：为匹配的元素删除设置的属性，删除由.prop()方法设置的属性集
3. 切换样式：toggle()，交替一组动作

$toggleBtn.toggle(function(){
//显示元素
    }.function(){
//隐藏元素
})

代码示例

$(.level1>a).click(function(){
    $(this).addClass("current")//给当前元素添加current样式
    .next().show()//下一个元素显示
    .parents().siblings().children//父元素的同辈元素的子元素a移除current样式
    ("a").removeClass("current")//他们的下一个元素隐藏
    .next().hide();
return false;
}

代码作用:
1. 当鼠标单击到a元素（class含有level1的子元素）的时候，给其添加一个名为current的class；
2. 将紧邻其后面的元素显示出来
3. 同时将他的父辈的同辈元素内部的子元素a都去掉一个名为current的class
4. 将紧邻他们后面的元素都隐藏

4. next():用于取得匹配元素后面紧邻的同辈元素
5. siblings():用于取得匹配元素前后所有的同辈元素
6. prev():用于取得匹配元素前面紧邻的同辈元素
7. parent()/parents()/closest()区别

方法	描述	示例
parent()	获得集合中每个匹配元素的父级元素	`$('.item-1').parent().css('background-color','red');//从指定类型的直接父节点开始查找，返回一个元素节点`
parents()	获得集合中每个匹配元素的祖先元素	`$('.item-1').parents('ul').css('background-color','red');//当它找到第一个父节点时继续向上查找，返回多个父节点`
closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素	`$('.item-1').closest('ul').css('background-color','red');//从包含自身的节点找起，只返回匹配的第一个元素节点`

8. offset():获取元素在当前视窗的相对位移，返回的对象包含两个属性，即top和left，只对可见元素有效
9. position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖先节点的相对偏移
10. scrollTop()/scrollLeft():获取元素的滚动条距顶端的距离和距左侧的距离，可指定参数控制元素的滚动条滚动在指定位置

/* 回到顶部 */
$(function() {
    $(window).scroll(function() {
if ($(window).scrollTop() > 100) {
            $(".top").fadeIn(1000);//只改变不透明度
        } else {
            $(".top").fadeOut(1000);
        }
    });
    $('body,html').animate({scrollTop: 0}, 1000);
});

事件冒泡

在页面上可以有多个事件，也可以多个事件响应同一个事件,当点击内部span元素，触发了3个click事件：span、div、body.

$(function(){
//为span元素绑定click元素
    $('span').bind('click',function(){
var txt="内层span元素被点击"；
    })
//为content元素绑定click元素
    $('#content').bind('click',function(){
var txt="外层div元素被点击"；
    })
//为body元素绑定click元素
    $('body').bind('click',function(){
var txt="body元素被点击"；
    })
})
<div id="content">
    外层div
    <span>内层span元素</span>
</div>

1.停止事件冒泡：stopPropagation()
2.阻止默认行为：preventDefault() →默认行为：单击超链接后会跳转、单击“提交按钮”后表单会提交
3.同时停止事件冒泡和阻止默认行为：在停止事件冒泡的处理函数中返回false或者在阻止默认行为的处理函数中返回false
4.event.type:获取事件的类型
5.event.target:获取到触发事件的元素
6.event.pageX/event.pageY:获取光标相对于页面的x坐标和y坐标

秒客网

《锋利的jQuery》学习笔记<1>

DOM操作

事件冒泡

相关文章