jQuery-5（HTML DOM）

1、获取和设置

//text() //获取元素的纯文本内容，不识别html标签（非表单元素）
//text("内容")  //设置元素的纯文本内容，不识别html标签（非表单元素）
console.log( "id为test1的元素的内容是:" + $("#text1").text() );
$("#text2").text("信科院");//html()    //获取元素的内容，包含html标签（非表单元素）
//html("内容")  //设置元素的内容，包含html标签（非表单元素）
console.log( "id为html1的内容是:" + $("#html1").html() );
$("#html1").html("<h2>湖南</h2>");//val() //获取元素的值（表单元素）
//val("值")    //设置元素的值（表单元素）
console.log( "id为op的元素的内容是:" + $("#op").val() );
$("#op").val("today!");//attr()   //获取或设置选定元素的属性值
console.log( "id为aa的name属性值是:" + $("#aa").attr("name") );
$("a").attr("href","http://www.baidu.com");//css()  //获取或设置选定元素的css属性值  addClass()为某个元素添加样式,removeClass()删除样式,toggleClass()删除添加轮流
console.log("段落的背景颜色是：" + $("p").css("background-color") );
$("p").css("background-color","red");
$("p").css("background-color":"red" , "font-size":"25px");$("button").click(function(){$("div#remove").toggleClass("bule");
})

2、添加

append()  //选定元素内部结尾处插入内容prepend()  //选定元素内部开头插入内容after()  //选定元素之后出入内容before()  //选定元素之前插入内容//用法一样
$("p#test").append("这是一段测试内容");appendTo()  //将内容插入到选定元素之前
$("<span>Hello World!</span>").appendTo("p");  //将Hello World!插入到p标签之前

3、删除

remove()  //删除选定元素及其子元素
$("p#test").remove();  //删除id为test的段落empty()  //清空元素，文本内容
$("h1").empty();removeAttr()  //删除元素的指定属性
$("div").removeAttr("id");

4、尺寸

width()  //获取或设置宽度（不包括内外边距和边框宽度）height()  //获取或设置高度（不包括内外边距和边框宽度）innerWidth()  //获取或设置宽度（包括内边距）innerHeight()  //获取或设置高度（包括内边距）outerWidth()  //获取或设置宽度（包括内边距和边框宽度）outerHeight()  //获取或设置高度（包括内边距和边框宽度）

jQuery-5（HTML DOM）相关推荐

jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
二、jQuery 选择器（超细）
文章目录前言一.jQuery 选择器是什么二.基本选择器 2.1 `ID Selector ("#id")` 选择一个具有给定 id 属性的单个元素 2.2 `Class S ...
javascript （BOM DOM）
BOM对象 window对象所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
从VirtualDom（虚拟Dom）到真实DOM
浏览器中的Dom更新在浏览器中渲染引擎将 node 节点添加到另外节点中时会触发样式计算.布局.绘制.栅格化.合成等任务,这一过程称为重排. 除了重排之外,还有可能引起重绘或者合成操作,也就是&q ...
jQuery bind（绑定事件）前别忘了unbind（移除事件）
效果图: 代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" ...
JavaScript高级（BOM+DOM）学习
文章目录 1.DOM简单学习 2.事件简单学习 3.点灯开关练习 4.BOM 4.1 BOM的概念 4.2 BOM的功能 4.3 BOM对象 4.4 Window :窗口对象 4.5 Location ...
jQueryのイベントをチュートリアルで学ぶ（前編）
jQueryを使ったプログラムの基本的な要素として.セレクターと(X)HTML/CSSを操作する命令について解説してきました.今回はもう1つの重要な要素である「イベント」を紹介します. 命令が実行さ ...
jQuery on（绑定事件）前别忘了off（移除事件）
废话不多说直接上代码,用到的自己运行看效果 <!DOCTYPE html> <html> <head><title></title> < ...
jQuery系列（十四）：jQuery中的ajax
1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...
jQuery使用（十二）：工具方法之type()之类型判断
type()的使用类型判断方法之is...() 实现原理可以参考我的另一篇js源码剖析博客: 类型和原生函数及类型转换(二:终结js类型判断) $.type( undefined ) === &qu ...

jQuery-5（HTML DOM）

jQuery-5（HTML DOM）相关推荐

最新文章

热门文章