当前位置 : 主页 > 网页制作 > JQuery >

jQuery - DOM操作

来源:互联网 收集:自由互联 发布时间:2021-06-15
获取元素内容 可以通过三种方法获取元素内容 html() ----设置或者返回元素的内容(包括html标签) text(); ----设置或者返回元素的内容 val(); ----设置或者返回表单的内容 设置属性值 attr()方法

获取元素内容

可以通过三种方法获取元素内容

  • html() ----设置或者返回元素的内容(包括html标签)
  • text(); ----设置或者返回元素的内容
  • val(); ----设置或者返回表单的内容

 

设置属性值

attr()方法同样可以设置属性值,并且也可以同时设置多个属性值。

//给a标签设置链接
$("button").click(function(){ 
  $("#a").attr("href","//www.baidu.com/"); 
});

//给a标签设置连接及title
$("button").click(function(){ 
  $("#a").attr({ 
    "href" : "//www.baidu.com", 
    "title" : "jQuery 教程" 
  }); 
});

添加元素

jq当中,可以通过下面的方法添加元素:

  • append() - 在被选元素内部的结尾插入指定内容
  • prepend() - 在被选元素内部的开头插入指定内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
var d = $("<div>");

//尾部添加元素
// body被div插入了
$("body").append(d);
// 把div插入到body
d.appendTo($("body"));

//头部添加元素
$("body").prepend(d);
d.prependTo($("body"));

删除元素

jq当中删除元素的方法如下:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有元素:

$("p").remove(".italic");

css类的操作

jQuery 拥有若干进行 CSS 操作的方法。如下:

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性
// 添加类
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

// 添加多个类
$("button").click(function(){
  $("#div1").addClass("important blue");
});

 jQuery尺寸类

支持获取设置的尺寸

  • height() 设置或返回匹配元素的高度。
  • width() 设置或返回匹配元素的宽度。
  • scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
  • scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
  • innerWidth() 包含内边距(padding)
  • outerWidth()包含内边距和边框(padding+border)

 只能获取不能设置的尺寸

  • offset() 返回第一个匹配元素相对于文档的位置。
  • position() 返回第一个匹配元素相对于父元素的位置.
  • offsetParent() 返回最近的定位祖先元素。

尺寸类图解:

 

 

根据元素关系获取元素

获取祖先元素

下面的方法可以获取祖先元素:

  • parent() 方法返回被选元素的直接父元素。
  • parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()
  • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
  $("span").parentsUntil("div");
});

获取后代元素

下面的方法可以获取后代元素

  • children() 方法返回被选元素的所有直接子元素。
  • find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
//  返回属于 <div> 后代的所有 <span> 元素:
$(document).ready(function(){
  $("div").find("span");
});

// 返回 <div> 的所有后代
$(document).ready(function(){
  $("div").find("*");
});

获取兄弟元素

下面的方法可以获得兄弟元素 :

  • siblings() 方法返回被选元素的所有同胞元素。
  • next() 方法返回被选元素的下一个同胞元素。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev()
  • prevAll()
  • prevUntil()

过滤

所谓的过滤,就是查找指定的元素,常用方法有以下的几种:

  • first() 返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  • eq() 返回被选元素中带有指定索引号的元素
  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
  • not() 方法返回不匹配标准的所有元素
网友评论