JQuery中DOM操作[续]

10、设置和获取HTML、文本和值示例代码

<p title=”选择你喜欢的水果?”><b>选择你喜欢的水果?</b></p>

<form action=”” method=”post”>

用户输入<input name=”title” id=”myinput” value=”请输入内容” />

</form>

<script language=”javascript”>

var p_html=$(“p”).html();//获取p元素的html代码,注意这里包含了<b></b>

//如果需要重新设置,只需在html函数中加入参数,这个函数类似js中的innerHTML属性

$(“p”).html(“<i>这是新的内容</i>”);

//上面函数带的有html格式,如果只需要更改文字呢?

$(“p”).text(“这里只能填写文字,<b>这里标签里的内容</b>”);

//如果需要获取到用户输入的值比如value,比如常用的,输入框中提示文字

$(“#myinput”).focus(function(){//相当于js中的onfocus方法

var text=$(this).val();

if(text==”请输入内容”){

$(this).val(“”);//获取焦点之后把原来内容清空

}

});

$(“#myinput”).blur(function(){

var text=$(this).val();

if(text==””){

$(this).val(“请输入内容”);

}

});

</script>

11、遍历节点示例代码:

<span><p>你最喜欢的运动是?<b>这是span后代元素内容</b></p></span>

<ul>

<li>篮球</li>

<li>足球</li>

<li>排球</li>

</ul>

<script language=”javascript”>

//获取子元素,这里只是获取子元素和后代元素无关

var $span=$(“span”).children();//获取到的内容是:<p>你最喜欢的运动是?<b>这是span后代元素内容</b></p>

var $p=$(“p”).children();//alert($p[0].innerHTML);获取到的内容是:<b>这是span后代元素内容</b>

var $ul=$(“ul”).children();

//获取同辈元素,span和ul是同辈元素,可用$(“span”).next()获取到ul,同样可以用$(“ul”).prev()获取到span

//想获取所有的同辈siblings()

</script>

12、CSS操作示例代码(这里要注意前面有addClass和removeClass)

<p style=”color:red”>这是要设置的内容</p>

<script language=”javascript”>

var style=$(“p”).css(“color”);//当然这里和attr用法类似

alert(style);//这里获取的是rgb

//位置相关函数offset()是当前元素在当前窗口想对偏移有top和left属性

//position()方法是相对于最近的一个position设置为relative或者absolute的祖父节点偏移也有top和left属性

</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

10720
来自专栏Android干货

小程序实践(二):swiper组件实现轮播图效果

28030
来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

22940
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb01轻松掌握HTML(Java真正的全栈开发)

? html 一.html介绍: 全称为HyperText Markup Language,译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用...

41850
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

25370
来自专栏前端儿

CSS布局 -- 左侧定宽,右侧自适应

15020
来自专栏西安-晁州

关于vue.js中slot的理解

16930
来自专栏Google Dart

AngularDart4.0 高级-组件样式 顶

Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询的知识直接应用于Angular应用程序。

11820
来自专栏小筱月

onload 和 domready

window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕)

30520
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

2K40

扫码关注云+社区

领取腾讯云代金券