jQuery-DOM操作

jQuery的DOM节点：

1、获取节点的内容： text()方法

2、查找属性节点，并且的到属性值 attr（）

var $para = $("p");

var p_text = $para.attr("title");

alert(p_text);

3、创建元素节点：

var $li_1 = $("<li title='香蕉'>香蕉</li>");

var $li_2 = $("<li title='梨'>梨</li>");

$("ul").append($li_1);

$("ul").append($li_2);

4、插入到HTML中

//插入节点的方法

append() : 向每个匹配的元素内部追加内容

appendTo() :

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

prependTo() :

after() : 在每个匹配的元素知乎插入内容

insertAfter() : 将A插入到B后面

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

insertBefore() : 将A插入到B的前面

5、remove()方法：使用该方法后，该节点所包含的所有后代节点都会同时被删除，该方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素

var $li = $("ul li:eq(1)").remove();

$li.appendTo("ul");

$("ul li").remove("li[title != 菠萝]");

6、detach()方法与remove（）方法一样，都是从DOM中去掉所有匹配的元素，淡水该方法不会把匹配的元素从jQuery对象中删除，因此将来还可以再使用这些匹配的元素，与remove（）方法不同的是，所有的绑定事件，附加的数据都会保留下来

7、empty（）方法：不是删除节点。而是清空元素中的所有后代节点

8、复制节点：

$("ul li").click(function(){

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

})

$(this).clone(true).appendTo("ul");

//在colne中传递了一个参数，它的含义是复制元素的时候同时复制元素中的绑定事件

9、替换节点：replaceWith（）以及replaceAll（）

$("p").replaceWith("你最不喜欢的水果是？");

$("你最不喜欢的水果是？").replaceAll("p");

10、包裹节点:wrap(),wrapAll(),wrapInner()

wrap():

$("strong").wrap(" ");

//将strong标签用br标签包裹起来

wrapAll():

你最不喜欢的水果是？

***************************************

$("strong").wrap(" ");

你最不喜欢的水果是？

***************************************

$("strong").wrapAll(" ");

你最不喜欢的水果是？

//如果要是被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后

wrapInner():

//将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来

$("strong").wrapInner(" ");

你最不喜欢的水果是？

11、获取属性以及设置属性

//获取元素的属性title，只需要给attr（）传递一个参数

//设置title属性的值，需要传递2个参数

var $para = $("p");

var p_text = $para.attr(“title)；

//单个属性值

$("p").attr("title" , "you title");

//多个属性值

$("p").attr("title"："you title"，"name": "name");

12、删除文档中某个元素的特定属性

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

13、获取样式：

与获取class属性就可以了（将原来的替换成新的）

追加样式：addClass（）

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

14、移除样式：

好

//移除一个

$("p").removeClass("high");

//移除2项

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

//一性移除多项

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

//移除该元素的所有样式

$("p").removeClass();

15、切换样式：toggleClass（）控制样式的重复切换,如果类名存在就删除它，如果不存在就添加它

$("p").toggleClass("another"); ---重复切换another类

16、判断是否含有某个样式：hasClass（）

17、获取设置html代码

var p_html = $("p").html();

alert(p_html);

//设置元素的HTML代码

$("p").html("wwwwwww");

18、text（）获取元素的文本

$(“p“).text(“woshihaioohh”)

19、val()方法：设置和获取元素的value值

this.defaultValue是指当前文本框的默认值

//下拉列表的第二项以及第一项被选中

$("#multiple").val(["选择2号","选择3号"]);

//多选框被选中

$(":checkbox").val(["check2","check3"]);

//单选框被选中

$(":radio").val(["radio2"]);

还可以使用attr方法

$("[value=radio2]:radio").attr("checked",true);

$("#single option:eq(1)").attr("selected",true);

20、children（）方法获取匹配元素的所有子元素的个数，只考虑子元素，不考虑其他后代子元素

21、next（）方法：取得匹配元素后面紧邻的同辈元素

22、prev（）方法：取得匹配元素前面紧邻的同辈元素

23、siblings（）方法：取得匹配元素前后的所有同辈元素

24、closest（）方法：取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上查找，如果什么都没找到，则返回一个空的jQuery对象

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

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

})

25、parent（）获得集合中每个匹配元素的父级元素

Parents（）每个匹配元素的祖先元素，找到父级之后还会继续向上查找

26、$("p").css("color");//获取元素的样式颜色

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

$("p").css({"color":"red","fontSize":"30px"});

$(element).css(height);

$("p").height();

$("p").height(100);---默认是px

$("p").height("100em");

27、元素定位：

Offset（）：获取元素在当前视窗的相对偏移

var offset = $("p").offset();

var left = offset.left;

var top = offset.top;

position（）:获取元素相对于最近的一个position样式属性的祖先父节点的相对偏移

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

var left = position.left;

var top = position.top;

scrollTop（）以及scrollLeft（）方法：分别获取元素的滚动条距顶端的距离以及距左侧的距离

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

var scrollLeft = $("p").scrollLeft();

*******************

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

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

28、show（）

$(selector).show(speed,callback)

可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

可能的值：

毫秒（比如 1500）

"slow"

"normal"

"fast"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery练习</title>
    <link rel="stylesheet" type="text/css" href="css/DOM.css">
    <script type="text/javascript" src="scripts/jquery-1.12.0.js"></script>
</head>
<body>
    <!-- 链接提示 -->
    <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1：</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2：</a></p>
    <p><a href="#" title="这是自带的提示1">自带提示1</a></p>
    <p><a href="#" title="这是自带的提示2">自带提示2</a></p>
    <!-- 图片链接提示 -->
    <ul>
        <li><a href="images/pic1.jpg" class="tooltip" title="111"><img src="images/pic2.jpg"></a></li>
        <li><a href="images/pic3.jpg" class="tooltip" title="222"><img src="images/pic4.jpg"></a></li>
        <li><a href="images/pic5.jpg" class="tooltip" title="333"><img src="images/pic6.jpg"></a></li>
    </ul>
    <script type="text/javascript" src="js/DOM.js"></script>
</body>
</html>

//title属性
$(function(){
    var x=10;
    var y=10;
    $("a .tooltip").mouseover(function(e){
        this.myTitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
        $("body").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"
        });
    });
})


//图片链接
    $(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 元素 
    $("body").append(tooltip); //把它追加到文档中 
    $("#tooltip") 
    .css({ 
    "top": (e.pageY+y) + "px", 
    "left": (e.pageX+x) + "px" 
    }).show("fast"); //设置x坐标和y坐标，并且显示 
    }).mouseout(function(){ 
    this.title = this.myTitle; 
    $("#tooltip").remove(); //移除 
    }).mousemove(function(e){ 
    $("#tooltip") 
    .css({ 
    "top": (e.pageY+y) + "px", 
    "left": (e.pageX+x) + "px" 
    }); 
    }); 
    })