HTML 学习笔记 JQuery（DOM 操作3）

设置和获取HTML 文本和值

1.html()方法

类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容

例子

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p class="demop">获取或设置HTML 文本 和 值</p>
    </body>
    <script >
        //获取文本内容
        alert($(".demop").html());
        //设置HTML内容
        $(".demop").html("<ul><li>哈哈哈哈</li></ul>");
        //也可以只设置单纯的文本内容
        $(".demop").html("烦躁");
    </script>
</html>

2.text()方法

类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

获取文本内容

$(".demop").text();

设置文本内容

$(".demop").text("只能设置文本内容，如果设置HTML内容，会当作文本内容显示");

3.val() 方法

此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框下拉列表还是单选框，他都可以返回元素的值，如果元素为多选，则返回一个包含所有选择值的数组.

那么我们可以根据这个方法做一个登陆界面默认表单中有提示用户输入的内容，但鼠标滑过去提示内容为空

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p class="demop">获取或设置HTML 文本 和 值</p>
        <div id="container">
            <div class="address">
                <input id="addressIP" type="text" value="请输入邮箱地址"/>
                <input type="radio" name="addressName" />留在首页
                <input type="radio" name="addressName" />进入邮箱
            </div>
            <div class="address">
                <input id="psw" type="text" value="请输入邮箱密码" />
                <button type="button">登录</button>
                <input type="checkbox" />记住状态
            </div>
        </div>
    </body>
    <script >
        $("#addressIP").mousemove(function() {
            //获取value
            if ($("#addressIP").val() == "请输入邮箱地址") {
                //设置value
                $("#addressIP").val("");
            }
        });
        $("#addressIP").mouseout(function(){
            if ($(this).val() == "") {
                $(this).val("请输入邮箱地址");
            }
        });
        $("#psw").mousemove(function() {
            if ($("#psw").val() == "请输入邮箱密码") {
                $("#psw").val("");
            }
        });
        $("#psw").mouseout(function(){
            if ($(this).val() == "") {
                $(this).val("请输入邮箱密码");
            }
        });
 
        //获取文本内容
//        alert($(".demop").html());
        //设置HTML内容
        $(".demop").html("<ul><li>哈哈哈哈</li></ul>");
        //也可以只设置单纯的文本内容
        $(".demop").text();
//        alert(document.getElementsByClassName("demop")[0].value);
    </script>
</html>

另外判断表单是否被选中可以使用checked属性。

在该例子中也可以使用表单元素的defaultValue属性来实现同样的功能，defaultValue属性包含改表单元素的初始值。

$("#psw").mousemove(function() {
            if ($("#psw").val() == $(this).defaultValue) {
                $("#psw").val("");
            }
        });

通过上面的例子我们可以看到 val()方法不仅可以设置元素的值也可以获取元素的值。另外，val()方法还有另外一个用处，就是它能使select(下拉列表框) checkbox(多选框) 和 radio(单选框)相应的选项被选中，在表单操作中经常会被用到

例子

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <select id="single">
            <option>选择一号</option>
            <option>选择二号</option>
            <option>选择三号</option>
        </select>
        <br />
        <select id="multiple" multiple="multiple" style="height: 120px;">
            <option selected="selected">选择一号</option>
            <option>选择二号</option>
            <option>选择三号</option>
            <option>选择四号</option>
            <option selected="selected">选择五号</option>
        </select>
        <br />
        <input type="checkbox" value="check1" />多选1
        <input type="checkbox" value="check2" />多选2
        <input type="checkbox" value="check3" />多选3
        <input type="checkbox" value="check4" />多选4
        <br />
        <input type="radio" value="radio1" name="name"/>单选1
        <input type="radio" value="radio2" name="name"/>单选2
        <input type="radio" value="radio3" name="name"/>单选3
    </body>
    <script>
        //是下拉选择框选中第二个
        $("#single").val("选择二号");
        //如果使下拉列表中的第二项和第三项被选中
        $("#multiple").val(["选择二号","选择三号"]);
        //设置多选框的选中情况
        $(":checkbox").val(["check2","check3"]);
        $(":radio").val(["radio2"]);
    </script>
</html>

效果图

在上面的例子中可以使用val()也可以使用attr()方法实现

    <script>
        //是下拉选择框选中第二个
        $("#single").val("选择二号");
        $("#single option:eq(1)").attr("selected",true);
        //如果使下拉列表中的第二项和第三项被选中
//        $("#multiple").val(["选择二号","选择三号"]);
        //也能选中 但是书写前默认选中的还是选中状态 与上面相反
        $("#multiple option:eq(1)").attr("selected",true);
        $("#multiple option:eq(2)").attr("selected",true);
        //设置多选框的选中情况
//        $(":checkbox").val(["check2","check3"]);
        $("[value = check2]:checkbox").attr("checked",true);
//        $(":radio").val(["radio2"]);
        $("[value = radio2]:radio").attr("checked",true);
    </script>

遍历节点

1. children()方法

该方法用于获取匹配元素的子元素集合

HTML 代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p title="选择你喜欢的水果">你最喜欢的水果?</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>
    </body>
</html>

对应的DOM树结构如下

var $ul = $("p").next();
alert($ul.html());

根据DOM树结构，可以知道各个元素之间的关系以及他们子节点的个数<body>元素下有<p>和<ul>两个字元素 <p>元素没有字元素 <ul>元素有三个<li>子元素

下面使用children()方法来获取匹配元素的所有子元素的个数

    <script>
        alert($("ul").children().length);
        for (var i = 0; i < $("ul").children().length; i++) {
            //奇怪的使使用html() text()不行了 取出来的不是JQuery对象 直接是JavaScript对象 所以使用JQuery方法不行了
            alert($("ul").children()[i].innerHTML);
        }
    </script>

2. next()方法

该方法用于获取匹配元素后面紧邻的同辈元素。

从DOM树的结构中可以知道<p>元素下一个同辈节点<ul>,因此可以通过next()方法获取<ul>元素代码如下

var $ul = $("p").next();
alert($ul.html());

3. prev()方法

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

从DOM树的结构中可以知道<ul>的上面又一个紧邻的同辈元素<p> 那么可以使用下面的代码获取p元素

var $p = $("ul").prev();
alert($p.text());

4. siblings()方法

该方法用于取得匹配元素前后所有的同辈元素

我们修改html代码如下

    <body>
        <p title="选择你喜欢的水果">你最喜欢的水果?</p>
        <p id="siblings">siblings获取前后所有的同辈元素</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>
    </body>

写下如下代码后

//将前后的同辈元素移除
$("#siblings").siblings().remove();

结果前后的元素都被移除了

5. closest()方法

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

例如给点击的目标元素的最近的li元素添加颜色，可以使用如下代码

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

此外还有 nextAll() prevAll() parent()和parents() find() filter()等根据字面意思就很好理解的就不在赘述了

CSS-DOM 操作

CSS-DOM技术简单的来说就是读取和设置style对象的各种属性，style属性很有用，但最大的不足是无法通过它来提取通过外部CSS设置样式信息在JQuery中这些都非常简单

可以直接利用css()方法来获取元素样式属性例如

$("#siblings").css("transform","rotate(30deg)");

与attr()方法一样 css()方法也可以同时设置多个样式属性

$("#siblings").css({"transform":"rotate(30deg)","color":"red"});

注意：

如果值是数字将会自动转化为像素值

在css()方法中如果属性中带有"-"符号，例如font-size 和 background-color属性如果设置这些属性的时候不带引号，那么必须使用驼峰式写法

$("#demo1").css({fontSize:"30px",backgroundColor:"red"});

建议大家都带上引号还有提示多方便

在JQuery中设置透明度的变化使用opacity属性，JQuery已处理好了兼容性的问题。

获取某个元素的样式

alert($("#demo1").css("height"));

另外这样也可以

alert($("#siblings").height());

通过height()也可以设置高度

$("#siblings").height(100);

与height()对应的还有一个width()方法可以获取对应元素的宽度值

通过height()方法可以获取window和document的高度

css()和 height方法的区别就是 css()方法获取的高度值与样式的设置有关，可能会得到auto 或者"10px"之类的字符串而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位

如果用height()方法设置值了则获取相应的值

1. offset方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包括两个属性,即top 和 left 只对可见元素有效。

例如获取p元素的偏移量

$("#siblings").offset().top;
$("#siblings").offset().left;

2. position() 方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，他返回的对象也包括两个属性，即top和left

代码如下

alert($("#siblings").position().left);
alert($("#siblings").position().top);

3.scrollTop() 方法和 scrollLeft()方法

这两个方法的作用分别是获取元素滚动条距顶端的距离和距左侧的距离例如

alert($("#siblings").scrollTop());
alert($("#siblings").scrollLeft());

另外可以位置两个方法指定一个参数，控制元素的滚动条滚动到指定的位置。例如利用如下代码控制元素内的滚动条滚动到距顶端300 左侧300的距离

$("#siblings").scrollTop(300);

以上例子的完整代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        <style>
            #demo1 {
                position: relative;
            }
        </style>
    </head>
    <body>
        <p id="demo1" title="选择你喜欢的水果">你最喜欢的水果?</p>
        <p id="siblings">siblings获取前后所有的同辈元素</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>
    </body>
    <script>
//        alert($("#demo1").css("height"));
//        $("#siblings").offset().top;
//        $("#siblings").offset().left;
        alert($("#siblings").position().left);
        alert($("#siblings").position().top);
        $("#siblings").scrollTop(300);
 
        alert($("#siblings").height());
        $("#demo1").css({fontSize:"30px",backgroundColor:"red"});
        $("#siblings").css({"transform":"rotate(30deg)","color":"red"});
        //将前后的同辈元素移除
        $("#siblings").siblings().remove();
        alert($("ul").children().length);
        for (var i = 0; i < $("ul").children().length; i++) {
 
            alert($("ul").children()[i].innerHTML);
        }
        var $ul = $("p").next();
        alert($ul.html());
        var $p = $("ul").prev();
        alert($p.text());
        $(document).bind("click",function(e) {
            $(e.target).closest("li").css("color","#FF0000");
        });
    </script>
</html>

实战

超链接和图片提示效果

1.超链接的提示效果

浏览器中一景自带了超链接提示，只需要在连接中加入title就可以了

<a href="#" title="这是我的超链接">提示</a>

但是这种方法响应非常慢你可以自己试一试。

我们可以自己实现这个功能看下代码

完整代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
                color: red;
            }
            #tooltip {
                background-color: darkgray;
                border: 1px solid orange;
                width: 120px;
                height: 25px;
                font-size: 12px;
                position: absolute;
            }
            body {
                position: relative;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
        <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示1</a></p>
        <p><a href="#" title="这是自带提示1">这是自带提示1</a></p>
        <p><a href="#" title="这是自带提示2">这是自带提示2</a></p>
 
        <script>
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function(e) {
                //显示title
                //创建一个div
                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(e) {
                this.title = this.myTitle;
                //隐藏title
                $("#tooltip").remove();
            });
        </script>
    </body>
</html>