锋利的jquery--CH3 jquery中的dom操作

锋利的jquery--CH3

append()  a--->after 向每个匹配的元素内追加内容

prepend()            向每个匹配的元素内部前置内容

appendTo()   prependTo()  ===>  和上面的2个格式左右颠倒而已;

后面颠倒的方法===》也很常用

after()   在每个匹配的元素之后插入内容；

before()  在每个匹配的元素之前插入内容;

insertAfter()  insertBefor()=>和上面的格式左右颠倒而已;

删除节点

1.remove()

元素在remove后还是可以使用的；

p69---???直接用appendTo(),并没有删除前面的节点？？？

2.detach()---注意和remove的区别，---不会吧匹配的元素从jquery对象中删除;

3.empty()--清空元素里面的内容；元素本省架构还在；

复制节点

$(this).clone().appendTo("body");

$(this).clone(true).appendTo("body");=>把this的事件属性都一起克隆；

替换节点

replaceWith

包裹节点

wrap();----->一个个包裹

wrapAll();------>来个大的，一起包裹；

wrapInner()--->每一个匹配的元素的子内容包裹起来；

removeAttr("title"); 删除某属性；

attr("class","newclassname");---->设定class名称；

addClass();

removeClass();

toggleClass();  //切换class，重要！！！

hasClass();---判断是否有某个class名称;

blur ---  失去焦点时触发事件；

defaultValue  表单元素的初始值;

children().length;----来获取匹配元素的所有子元素的个数;

children();----只考虑子元素，而不会考虑孙元素；

next();----用于取得匹配元素后面紧邻的同辈元素：

prev();----               前面

sublings()--------用于匹配元素前后所有的同辈元素；

closet() ----  用于匹配最近的匹配元素;

closet(),是从包含自身的节点找起，与parents()类似，

不同的在于，closest(),只返回最近的一个：

---------------demo()------------------------

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

</ul>

<script type="text/javascript">

    $(document).bind("click",function(e){

        $(e.target).closest("li").css("color","red");

    })

</script>

----------------------------------------------

-----------------------demo----------------

<p>ppppppp</p>

<script type="text/javascript">

$(function(){

    //$('p').css({'font-size':'23px','color':'#ff0000'}); //---font-size  23px 都要引号;

    $('p').css({fontSize:'23px',backgroundColor:'#ff0000'});

        //中间有—的属性，如果不加引号，可以用驼峰格式；---不推荐，上面的比较规范

});

</script>

-----------------------------------------------------

$(element).css("height");//---css中设置的高度;

$(element).height();//---实际高度

offset()----获取元素在当前视窗的相对偏移，有top left属性;

position()---获取元素相对于最近的一个position样式属性为relative或absolute的祖父节点的相对偏移，也有top ，left2个属性；

scrollTop---获取元素的滚动条距离顶端的距离;

scrollLeft

$("textarea").scrollTop(300);

下面2个案例比较好---function(e)应用比较多---