jqueryDOM操作

 1.  页面加载  函数

  $(
function(){
具体内容
}
);
 
     表示页面加载函数
 
2  dom 类操作
  • 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操作的更多相关文章

  1. HTML 学习笔记 JQuery(DOM 操作)

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  2. 5月16日上课笔记-js中DOM操作

    一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...

  3. 课堂笔记--------JavaScript 的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  4. 前端学习笔记之HTML DOM操作

    HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).   DOM节点类型 文档节点 (document,唯一) 元素节点 (那些个标签div ...

  5. 前端之DOM操作

    一.概念 javascript javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一. javascript跟java没有半毛钱关系. 声明局部变量:使用关键字va ...

  6. HTML 学习笔记 JQuery(DOM 操作2)

    接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...

  7. JavaScript学习笔记系列2:Dom操作(一)

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  8. HTML 学习笔记 JQuery(DOM 操作3)

    设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <he ...

  9. 【前端】DOM操作

    1 什么是DOM 全称 Document Object Model 文档对象模型. 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...

随机推荐

  1. Vim/gVim 中文显示为乱码的解决办法

    打开vimrc文件,在vim的安装目录下可以找到该文件,或在windows下是在vim/gvim下输入:edit $vim/_vimrc. 在文件的末尾添加一句 "set fileencod ...

  2. 语音文件 pcm 静默(静音)判断

    转载:http://www.voidcn.com/relative/p-fwdkigvh-bro.html pcm 文件存储的是 原始的声音波型二进制流,没有文件头. (1)首先要确认 pcm文件的每 ...

  3. Kafka相关概念及核心配置说明

    1. Kafka简介 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性 ...

  4. 高可用安装k8s1.13.0 --不能带cavisor、不能加cni ,带上这两个总是报错,kubelet无法启动

    高可用安装k8s1.13.0 --不能带cavisor,总是报错,kubelet无法启动

  5. Web后台管理系统

    开发语言:C# 数据库:sql2008 登录页面 后台管理首页 部分操作页面 后台管理系统,界面简洁,大方,操作简单,所有功能可定制开发. 后台管理系统制作 如果您有需要后台管理系统制作,请扫描添加微 ...

  6. Unity热更新 AssetBundle

    在游戏开发中,常常需要用到热更新技术.比如:一个手机游戏开发好后,用户安装到手机上.如果此时我们要更新一个新的功能,如果没有热更新,那么需要用户卸载掉手机上的游戏,然后安装新的包,这样做十分麻烦,而且 ...

  7. 50道Kafka面试题和解析(转载)

    转载:https://zhuanlan.zhihu.com/p/78912551 前言 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka ...

  8. (转)window.XMLHttpRequest详解(AJAX工作原理)

    转自:http://l.xbest.blog.163.com/blog/static/8640444120100225516963/?fromdm&fromSearch&isFromS ...

  9. beam search 和 greedy search

    贪心搜索(greedy search): 贪心搜索最为简单,直接选择每个输出的最大概率,直到出现终结符或最大句子长度. 集束搜索(beam search): 集束搜索可以认为是维特比算法的贪心形式,在 ...

  10. 改变core文件名称和生成路径

    echo "/mnt/nfs/core-%e-%p-%t" > /proc/sys/kernel/core_pattern core-函数名-pid-时间戳