jQuery HTML相关的基础知识梳理
2016-09-09 11:07
573 查看
jQuery中非常重要的部分,就是操作DOM的能力。
获取/设置
获取或设置内容-text()、html()以及val()
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括HTML标记)
val()-设置或返回表单字段的值
text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
获取或设置属性-attr()
用于获取属性值。
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
添加
添加新的HTML内容
append()-在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after()-在被选元素之后插入内容
before()-在被选元素之前插入内容
删除元素/内容
remove()-删除被选元素(及其子元素) 例如:
empty()-从被选元素中删除子元素 例如:
过滤被删除的元素
jQuery remove()方法也可以接受一个参数,允许对被删除元素进行过滤。
例如:
操作CSS
addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作
css()-设置或返回样式属性
css()方法
返回css属性 语法:
实例:
设置css属性 语法:
实例:
设置多个css属性
语法:
实例:
jQuery 尺寸 方法
width()-方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height()-方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()-方法返回元素的宽度(包括内边距)。
innerHeight()-方法返回元素的高度(包括内边距)。
outerWidth()-方法返回元素的宽度(包括内边距和边框)。
outerHeight()-方法返回元素的高度(包括内边距和边框)。
outerWidth(true)-方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)-方法返回元素的高度(包括内边距、边框和外边距)。
设置元素的宽度和高度可以用width(value)和height(value)
获取/设置
获取或设置内容-text()、html()以及val()
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括HTML标记)
val()-设置或返回表单字段的值
//获取内容 $("#btn1").click(function(){ alert("text:"+$("#test").text()); alert("HTML: " + $("#test").html()); alert("Value: " + $("#test").val()); }) //设置内容 $("#btn1").click(function(){ $("#test1").text("Hello world!"); $("#test2").html("<b>Hello world!</b>"); $("#test3").val("Dolly Duck"); }) //html <p id="test1">这是段落。</p> <p id="test2">这是另一个段落。</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });
获取或设置属性-attr()
用于获取属性值。
//获取属性 $("button").click(function(){ alert($("#w3s").attr("href")); }); //设置属性 $("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); }); //设置多个属性 $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" }); }); //html <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
添加
添加新的HTML内容
append()-在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after()-在被选元素之后插入内容
before()-在被选元素之前插入内容
删除元素/内容
remove()-删除被选元素(及其子元素) 例如:
$("#div1").remove();
empty()-从被选元素中删除子元素 例如:
$("#div1").empty();
过滤被删除的元素
jQuery remove()方法也可以接受一个参数,允许对被删除元素进行过滤。
例如:
$("p").remove(".italic");//删除class="italic" 的所有 <p> 元素
操作CSS
addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作
css()-设置或返回样式属性
//CSS样式 .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } //addClass()方法 $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); $("h3").addClass("important blue"); }) //removeClass()方法 $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }) //toggleClass()方法 $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); })
css()方法
返回css属性 语法:
css("propertyname");
实例:
$("p").css("background-color");
设置css属性 语法:
css("propertyname","value");
实例:
$("p").css("background-color","yellow");
设置多个css属性
语法:
css({"propertyname":"value","propertyname":"value",...});
实例:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸 方法
width()-方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height()-方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()-方法返回元素的宽度(包括内边距)。
innerHeight()-方法返回元素的高度(包括内边距)。
outerWidth()-方法返回元素的宽度(包括内边距和边框)。
outerHeight()-方法返回元素的高度(包括内边距和边框)。
outerWidth(true)-方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)-方法返回元素的高度(包括内边距、边框和外边距)。
设置元素的宽度和高度可以用width(value)和height(value)
相关文章推荐
- Java软件开发基础知识梳理之(6)------事务相关知识点
- html基础知识梳理
- 第一天上午——HTML网页基础知识以及相关内容
- Java软件开发基础知识梳理之(11)------Java中的GC操作及相关概念
- 重新梳理HTML基础知识
- python爬虫主要就是五个模块:爬虫启动入口模块,URL管理器存放已经爬虫的URL和待爬虫URL列表,html下载器,html解析器,html输出器 同时可以掌握到urllib2的使用、bs4(BeautifulSoup)页面解析器、re正则表达式、urlparse、python基础知识回顾(set集合操作)等相关内容。
- jQuery基础知识梳理
- 【知识】【HTML基础知识】修改checkbox-----增加相关协议
- HTML基础教程第3课-文字标签属性和文字布局相关知识
- 电商之梳理mybatis相关知识---开发基础框架
- HTML 相关基础知识
- jQuery遍历基础知识梳理
- 电商之梳理springmvc相关知识---开发基础框架
- 电商之梳理JQuery相关知识---前端技术
- ++++++jquery相关基础知识++++++
- WEB安全基础-HTML相关知识
- 5 HTML&JS等前端知识系列之jquery基础
- JQuery基础知识梳理篇
- 电商之梳理spring相关知识---开发基础框架
- 电商之梳理struts2相关知识---开发基础框架