笔记 前端的$dom操作
jqueryDOM操作
$(
function(){
具体内容
}
);
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- ★★★★★设置参数变量等时候 var=" 内容" 内容如果换行书写
- 需要写成var=" 内容很长"+
" 拼接起来 " ; --------否则无法编译
;$("#btn1").click(function(){
$("#test1").text("Hello world!");
}); #选择test匹配的id元素 改变元素内的text 属性 元素本身不改变
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
}); #选择test2匹配的id元素 改变元素内的整体 html 属性 元素本身不改变 类似插入
$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
#选择test3匹配的id元素 改变元素内的整体 value 属值 (如果有才生效) 元素本身不改变 类似改变值update
设置属性
设置单个属性
----------------------------------------------------------->
<script>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
});
</script>
-----------------------------------------------------------> <body> <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p> </body>
设置多个属性 .attr 后面用大括号 ({ ,}) 中间类似键值对 冒号:对应 用逗号,分割
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
$("p").append("追加文本");
$("p").append("追加可以设置 'html值 '"); p标签内部元素后添加 追加内容
笔记 前端的$dom操作的更多相关文章
- HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- 5月16日上课笔记-js中DOM操作
一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...
- 课堂笔记--------JavaScript 的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- 前端学习笔记之HTML DOM操作
HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). DOM节点类型 文档节点 (document,唯一) 元素节点 (那些个标签div ...
- 前端之DOM操作
一.概念 javascript javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一. javascript跟java没有半毛钱关系. 声明局部变量:使用关键字va ...
- HTML 学习笔记 JQuery（DOM 操作2）
接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- HTML 学习笔记 JQuery（DOM 操作3）
设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <he ...
- 【前端】DOM操作
1 什么是DOM 全称 Document Object Model 文档对象模型. 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...
随机推荐
- Python3.x运行Python2.x代码报错 syntax error "Missing parentheses in call to 'print'
#另外一种错误 SyntaxError: Missing parentheses in call to 'print'. Did you mean print( 查看代码,格式如下: print &q ...
- Go项目实战：打造高并发日志采集系统（五）
前情回顾 前文我们完成了如下功能1 根据配置文件启动多个协程监控日志,并启动协程监听配置文件.2 根据配置文件热更新,动态协调日志监控.3 编写测试代码,向文件中不断写入日志并备份日志,验证系统健壮性 ...
- php代码判断用户访问的当前协议是否为https
public function isHttps() { if ( ! empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) ...
- MySQL数据库锁机制之MyISAM引擎表锁和InnoDB行锁详解
转 http://blog.csdn.net/hsd2012/article/details/51112009 转 http://blog.csdn.net/e421083458/article/de ...
- Java并发——volatile
CPU的内存模型如下:
- 用事件队列来处理pixi中的场景元素入场
在pixi中,添加一个精灵元素,你可能需要,先将贴图load进来,然后才能添加到场景中去,所以一般会这么操作 Loader.add("tree","static/imag ...
- [转帖]CentOS7安装xrdp(windows远程桌面连接linux)
CentOS7安装xrdp(windows远程桌面连接linux) https://blog.csdn.net/sgrrmswtvt/article/details/81869208 You Konw ...
- 小菜鸟之HTML第三课
jquery的引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【LOJ】#3043. 「ZJOI2019」线段树
LOJ#3043. 「ZJOI2019」线段树 计数转期望的一道好题-- 每个点设两个变量\(p,q\)表示这个点有\(p\)的概率有标记,有\(q\)的概率到祖先的路径上有个标记 被覆盖的点$0.5 ...
- Minimum Cut(2015沈阳online)【贪心】
Minimum Cut[贪心]2015沈阳online 题意:割最少的边使得图不连通,并且割掉的边中有且仅有一条是生成树的边. 首先,我们选择一条树中的边进行切割,此时仅考虑树上的边集,有两种情况:1 ...