jQuery HTML
来源:互联网 发布:淘宝对比搞笑图片 编辑:程序博客网 时间:2024/06/05 04:34
1.1获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
实例
$("#btn1").click(function(){ alert("Text: " + $("#test").text());});----Text: 这是段落中的粗体文本。$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});----HTML: 这是段落中的<b>粗体</b>文本。$("#btn1").click(function(){ alert("Value: " + $("#test").val());});
1.2获取属性 - attr()
jQuery attr() 方法用于获取属性值。
实例
$("button").click(function(){ alert($("#w3s").attr("href"));});
1.3设置内容 - text()、html() 以及 val()
实例
$("#btn1").click(function(){ $("#test1").text("Hello world!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("Dolly Duck");});
1.4text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
实例
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });});----Old text: 这是粗体文本。 New text: Hello world! (index: 0)$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; });});----Old html: 这是另一段粗体文本。 New html: Hello world! (index: 0)
1.5设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
实例
$("button").click(function(){ $("#w3s").attr("href","http://www.baidu.com");});
attr() 方法也允许您同时设置多个属性。
实例
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" });});
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
实例
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });});
1.6jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); });
<p>This is a paragraph.</p><p>This is another paragraph.</p><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><button id="btn1">追加文本</button><button id="btn2">追加列表项</button>
---
This is a paragraph. Appended text.
This is another paragraph. Appended text.
- List item 1
- List item 2
- List item 3
- Appended item
- Appended item
1.7jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("#btn1").click(function(){ $("p").prepend("<b>Prepended text</b>. "); }); $("#btn2").click(function(){ $("ol").prepend("<li>Prepended item</li>"); });---Prepended text. This is a paragraph.
Prepended text. This is another paragraph.
- Prepended item
- Prepended item
- List item 1
- List item 2
- List item 3
1.8通过 append() 和 prepend() 方法添加若干新元素
实例
function appendText(){var txt1="<p>Text.</p>"; // 以 HTML 创建新元素var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素var txt3=document.createElement("p");txt3.innerHTML="Text."; // 通过 DOM 来创建文本$("body").append(txt1,txt2,txt3); // 追加新元素}<p>This is a paragraph.</p><button onclick="appendText()">追加文本</button>---This is a paragraph.
Text.
Text.
Text.
1.9jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); });---BeforeBeforeAfterAfter
1.10通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 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); // 在 img 之后插入新元素}---I love jQuery!
1.11jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例
$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); });<p>This is a paragraph in the div.</p><p class="italic"><i>This is another paragraph in the div.</i></p><p class="italic"><i>This is another paragraph in the div.</i></p><button>删除 class="italic" 的所有 p 元素</button>---This is a paragraph in the div.
This is another paragraph in the div.
This is another paragraph in the div.
变This is a paragraph in the div.
1.12jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
1.13jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。
实例
<script>$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style></head><body><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是非常重要的文本!</div><br><button>向元素添加类</button>
您也可以在 addClass() 方法中规定多个类<script>
实例
<script>$(document).ready(function(){ $("button").click(function(){ $("#div1").addClass("important blue"); });});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style></head><body><div id="div1">这是一些文本。</div><div id="div2">这是一些文本。</div><br><button>向第一个 div 元素添加类</button>
1.14jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性:
实例
$("button").click(function(){ $("h1,h2,p").removeClass("blue");});
1.15jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作
实例
$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});
1.16jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
实例
<script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 的尺寸</button><p>width() - 返回元素的宽度。</p><p>height() - 返回元素的高度。</p>
1.17jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
实例
<script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height of div: " + $("#div1").innerHeight(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 的尺寸</button><p>innerWidth() - 返回元素的宽度(包括内边距)。</p><p>innerHeight() - 返回元素的高度(包括内边距)。</p>
1.18jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
实例
<script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height of div: " + $("#div1").outerHeight(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 的尺寸</button><p>outerWidth() - 返回元素的宽度(包括内边距和边框)。</p><p>outerHeight() - 返回元素的高度(包括内边距和边框)。</p>
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
实例
<script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 的尺寸</button><p>outerWidth(true) - 返回元素的宽度(包括内边距、边框和外边距)。</p><p>outerHeight(true) - 返回元素的高度(包括内边距、边框和外边距)。</p>
1.19jQuery - 更多的 width() 和 height()
下面的例子返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:
实例
<script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });});</script></head><body><button>显示文档和窗口的尺寸</button>
下面的例子设置指定的 <div> 元素的宽度和高度:
实例
$("button").click(function(){ $("#div1").width(500).height(500);});
- jQuery HTML
- JQuery HTML
- jQuery HTML
- jQuery HTML
- JQuery HTML
- jQuery-HTML
- jQuery-HTML
- jQuery HTML
- jQuery HTML
- jQuery HTML
- jQuery HTML
- jQuery HTML
- jQuery(三) jQuery Html
- **JQUERY** jQuery与HTML
- 【jQuery 教程】jQuery HTML 操作
- jQuery学习 三 jQuery HTML
- jQuery第六节---jQuery HTML
- jQuery - 参考资料 - HTML+TIME:
- 07.改变显示方式
- 转载:求一组数组中出现单次的数字类问题
- nginx反向代理跨域配置
- 当 IDENTITY_INSERT 设置为 OFF 时,不能为表中的标识列插入显式值
- HDU 5289 Assignment
- jQuery HTML
- 第18节 C语言之字符串与常见的字符串库函数
- [机器学习]基于TextBlob简单文本情感分析
- error: stray ‘\357’ in program——输入了中文的标点符号
- HADOOP中HDFS工作原理
- intel_iommu=on导致物理机报文收发基本不可用
- UVA-101 The Blocks Problem
- JVM虚拟机32位和64位的探索(转发 jvm32位、64位区别 )
- c++对象中的易错题集-拷贝构造了多少次