JQuery学习之操作DOM
1.DOM,就是Document Object Model(文档对象模型)
2.获得内容的方法:
**text():设置或返回所选元素的文本内容
$("#btn1").click(function{
alert("Text: " +$("#test").test());
});
**html():设置或返回所选元素的内容(包括HTML标记)
$("#btn2").click(function(){
alert("HTML:" +$("#test").html());
});
**val():设置或返回表单字段的值
$("#btn1").click(function(){
alert("值为:"+ $("#test").val());
});
**attr():用于获取属性值
$("button").click(function(){
alert($("#runoob").attr("#href"));
});
3.设置内容和属性:
**text():设置或返回所选元素的文本内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
**html():设置或返回所选元素的内容(包括HTML标记)
$("#btn2").click(function{
$("#test2").html("<b>Hello world!</b>");
});
**val():设置或返回表单字段的值
$("#btn3").click(function{
$("#test3").val("RUNOOB");
});
4.上面的三个jQuery方法:text(),html()以及val(),同样拥有回调函数;回调函数由两个参数:被元素列表中当前元素的下标,以及原始(旧的)值,然后以函数新值返回您希望使用的字符串;
$("#btn1").click(function(){
$("test1").text(function(){
return "旧文本:"+origText+"新文本:Hello world!(index:"+i+")";
});
});
5.设置属性:
**attr():可以改变(设置)链接中href属性的值:
$("button").click(function(){
$("#runoob").attr("href","httf://www.runoob.com/jquery");
});
**attr()方法也允许同时设置多个属性:
$("#button").click(function{
$("#runoob").attr({
"href":"http://www.runoob.com/jquery",
"title":"jquery 教程"
});
});
**attr()的回调函数:
$("button").click(function(){
$("#runoob").attr("href",function(i,origValue){
return origValue+"/jquery";
});
});
6.添加元素:
**append():在被选元素的结尾插入内容
$("p").append("追加文本");
**prepend():在被选元素的开头插入内容
$("p").prepend("在开头追加文本");
**通过append()和prepend()方法添加若干新元素
append()和prepend()方法能够通过参数接收无限数量的新元素
function appendText(){
var txt1="<p>文本。</p>"; //使用HTML标签创建文本
var txt2=$("<p></p>").text("文本。"); //使用Jquery创建文本
var txt3=document.ctreateElement("p");
txt3.innerHTML="文本。"; //使用DOM创建文本
$("body").append(txt1,txt2,txt3);
}
**after():在被选元素之后插入内容
$("img").after("在后面添加文本");
**before():在被选元素之前插入内容
$("img").before("在前面添加文本");
**通过after()和before()方法添加若干新元素:
after()和before()方法能够通过参数接收无限数量的新元素;
function afterText(){
var txt1="<b> I </b>"; //使用HTML创建元素
var txt2=$("<i></i>").text("love "); //使用jQuery创建元素
var txt3=document.createElement("big"); //使用DOM创建元素
txt3.innerHTML="jQuery! ";
$("img").after(txt1,txt2,txt3); //在图片后添加文本
}
7.删除元素:
**remove():删除被选中元素(及其子元素)
$("#div1").remove();
**empty():从被选元素中删除子元素
$("#div1").empty();
**过滤被删除的元素:
$("p").remove(".italic"); //删除class="italic"的所有<P>元素
JQuery学习之操作DOM的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- js,jquery和dojo操作dom
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...
- Jquery选择器,操作DOM
刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...
- jQuery学习笔记(DOM操作)
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jquery学习:选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- 使用Jquery与vuejs操作dom比较
jquery实现添加功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JQuery学习之操作CSS
样式表: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } 1.addClass():向被选元素添加一个 ...
随机推荐
- VC++ 之常见内存异常值
0 VC++ 常见的内存异常值 * 0xcccccccc : Used by Microsoft's C++ Debugging runtime library to mark uninitialis ...
- sqlserverJDBC驱动链接
final String DRIVER="com.microsoft.jdbc.sqlserver.SQLServerDriver"; final String URL=" ...
- 甲鱼od18篇笔记
模态对话框和非模态对话框 一:模态对话框是调用DialogBoxParam API 函数来实现的 二:非模态对话框是调用Crea ...
- php数据访问(批量删除)
批量删除: 首先给每一行加上复选框,也就是在自增长列内加入checkbox.因为这里可以多选,也可以单选,所以在传值的时候需要传一个数组来进行处理,所以复选框name的值设定一个数组.传值都是传的va ...
- struts.xml配置详解
struts.xml是我们在开发中利用率最高的文件,也是Struts2中最重要的配置文件. 一下分别介绍一下几个struts.xml中常用到的标签 1.<include> 利用includ ...
- checkbox实现全选全不选
1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...
- LNMP平台搭建---Linux系统安装篇
在互联网网站开发领域,有一个名词,大家一定不陌生,那就是LAMP,经典的Web服务器环境,由Linux+Apache+MySQL+PHP组成,,后来,一个名叫Nginx的Web服务器开源出来了,因其更 ...
- YCbCr 编码格式(YUV)---转自Crazy Bingo的博客
YCbCr是DVD.摄像机.数字电视等消费类视频产品中,常用的色彩编码方案. YCbCr 有时会称为 YCC..Y'CbCr 在模拟分量视频(analog component video)中也常被称为 ...
- EasyUi – 5.修改$.messager.show() 弹出窗口在浏览器顶部中间出现
由于在easyui中$.messager.show() 只有一种弹出方式(在浏览器的或下角弹出),我最近在做一个项目的时候需要在浏览器的顶部中间出现.由于自己写花那么多的时间,所以就去修改了原码(不推 ...
- Error parsing 'file:///media/RHEL_5.5\\ x86_64\\ DVD/Server'
Error parsing 'file:///media/RHEL_5.5\\ x86_64\\ DVD/Server' http://lindows.iteye.com/blog/456637 ht ...