JQuery笔记——HTML

2016-07-09  本文已影响13人  luichooy

元素内容和属性的获取与设置

text() html() val() attr()

添加元素

append() - 在被选元素的结尾插入内容 appendTo() prepend() - 在被选元素的开头插入内容 prependTo() after() - 在被选元素之后插入内容 insertAfter() before() - 在被选元素之前插入内容 inertBefore()
上述方法可传入多个参数,从而向DOM中添加若干个参数。

example:将A元素插入B元素
A.append(B)——在B元素内部的后面插入A元素,即B元素和A元素是父子关系。
A.after(B)——在B元素外部的后面插入A元素,即B元素和A元素是兄弟关系。
B.appendTo(A)——将A元素插入B元素内部的后面,父子关系。
A.inertAfter(B)——将A元素插入B元素外部的后面,兄弟关系。

创建元素

  1. 以html创建新元素
    var txt1="<p>Text.</p>"
  2. 以JQuery的方式创建新元素
    var txt2=$('<p></p>').text('Text.')
  3. 以javascript的方式创建新元素
    var txt3=document.creatElement("p"); txt3.innerHTML="Text.";

删除元素

remove()---删除备选元素及其子元素 $("#div1").remove(); empty()---删除备选元素的子元素 $("#div1").empty();---清空div1

过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有p元素:
$("p").remove(".italic");

JQuery中CSS的操作

addClass() - 向被选元素添加一个或多个类 removeClass()- 从被选元素删除一个或多个类 toggleClass()- 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性

JQuery尺寸

width() height()
设置或获取元素的宽度/高度,不包括内边距、边框、外边距
innerWidth() innerHeight()
包括内边距
outerWidth() outerHeight()
包括内边距和边框

获取HTML文档和浏览器视口的宽度:
$(document).width();
$(window).width();

上一篇下一篇

猜你喜欢

热点阅读