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& ...
随机推荐
- TIOBE排行榜
作者:码思客链接:https://zhuanlan.zhihu.com/p/37513668来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1 JAVA 毫无疑问的业界 ...
- Loj #6287 诗歌
link: https://loj.ac/problem/6287 一开始差点写FFT了23333,并且FFT还能算这样的三元组的数量而且还不用要求这是一个排列.... 但这太大材小用了(而且很可能被 ...
- Zlib编译
转自原文 编译和使用zlib 由于要编译Cesium Terrain Build,其中不仅需要gdal,还用到了zlib,所以此时不得不总结一下Zlib的编译之道了. 在windows下用到zlib库 ...
- angular使用canvas操作时报错
最近,用 angular 前端框架为应用登录新增图形验证码认证,由于没有现成的插件,于是便使用canvas+js操作,也是可以正常使用,但是在编译阶段却有个报错: ERROR in src/app/l ...
- 学习和家庭教育 z
大家好,我是王宁. 今天能站在这里,纯属偶然. 为什么说偶然呢? 因为,南雅是个人才济济的地方,164班是一个优秀的集体. 个人认为,班级前二十几名的同学,时机适宜,谁考班上第一名都有可能. 妈妈对我 ...
- XCode设置竖屏
选中你的项目,在General这个标签内,Deoployment info的这个分组,有一个Device Orientation 标签,内有一个Portrait的选项,选中是竖屏,取消选中是横屏
- django 发送邮件设置
http://blog.csdn.net/zy416548283/article/details/45058369 http://blog.csdn.net/viqecel/article/detai ...
- NVIDIA® Quadro® 四路缓冲 3D立体方案
http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...
- NV 3D投影方案 【转】
http://tu.pcpop.com/all-677013.htm 1/8 NVIDIA 3D方案涉及图形处理器(GPU).信号发射器.快门式3D眼镜.3D播放软件以及经过NVIDIA认证的显示器. ...
- MetaQ对接SparkStreaming示例代码
由于JavaReceiverInputDStream<String> lines = ssc.receiverStream(Receiver<T> receiver) 中 没有 ...