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>