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>
HTML 学习笔记 JQuery(DOM 操作3)的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记(DOM操作)
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- java学习笔记07--日期操作类
java学习笔记07--日期操作类 一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据(2)
tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据(1)
续集请点击我:tensorflow学习笔记——使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- HTML 学习笔记 JQuery(DOM 操作)
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
随机推荐
- 基于Java实现的选择排序算法
选择排序和冒泡排序同样是基础排序算法,现在也做个学习积累. 简述 选择排序算法较为稳定,基本上都是O(n2)的时间复杂度,规模越小排序越快,不需要占用额外空间.其实选择排序原理很简单,就是在未排序序列 ...
- Qt小结
(1)#include 报错fatal error: QHostInfo:No such file or directory, 解决办法 在.pro文件中添加 QT += core gui netwo ...
- 写在php设计模式前
在学校写代码的时候,看过许多代码,跟着学长学过一段时间.找工作的时候由于种种原因,从事于本专业, 最近重拾php,充充电,找个好工作. 以前项目中设计模式用的比较多的也就是单例模式,看书中回顾写过的代 ...
- python tcp,udp简单使用
import socket host = '127.0.0.1' port = 9999 #创建一个tcp socket套接字 tcp_server = socket.socket(socket.AF ...
- js 选项卡封装
function tab(input,div){ for(var i = 0; i < input.length; i++){ input[i].index = i; input[i].oncl ...
- div下拉框(待改善)
不说话,直接上代码,其中函数dealchose()没有实现,各位就不必纠结了 <%@ page language="java" import="java.util. ...
- 公司的mysql-installer-community-5.7.19.0安装注意
需要安装Microsoft Visual C++ 2013 Redistributable(x64) 和 Microsoft Visual C++ 2013 Redistributable(x86) ...
- RelativeLayout布局(仅在RelativeLayout中有效)
在父亲布局的相对位置 android:layout_alignParentLeft="true" //在布局左边 android:layout_alignParentRig ...
- json解析:[1]gson解析json
客户端与服务器进行数据交互时,常常需要将数据在服务器端将数据转化成字符串并在客户端对json数据进行解析生成对象.但是用jsonObject和jsonArray解析相对麻烦.利用Gson和阿里的fas ...
- 【Web API系列教程】3.10 — 实战:处理数据(公布App到Azure App Service)
在这最后一节中.你将把应用程序公布到Azure.在Solution Explorer中,右击项目并选择Publish. 点击Publish打开Publish Web对话框. 假设你在新建项目的时候选中 ...