jquery 操作DOM

亦凉 2022-05-26 23:20 231阅读 0赞

### 操作属性 ###

--------------------

通过attr可以获取标签的属性值， 还可以设置属性值， 和css()类似.  
测试代码如下

获取第一个a标签的href属性值

$('div ul li a').attr('href');

将所有a标签的href属性设为百度网址, 将name设为link

$('a').attr({
       'href':'http://www.baidu.com', 'name':'link'})

当给一批元素设置id时，也可以用attr，因为标签id只能是唯一的所以可以使用如下方式

$('a').attr({
       'href':'http://www.baidu.com', 'name':'link',
                        'id':function(index, value){ 
                            return 'link-'+index;
                        }});

这样做之后， id就变成了link-0, link-1。

### DOM元素属性 ###

--------------------

DOM属性和HTML属性是有区别的，JavaScript操作的是DOM而不是HTML 。 这个`<div class='mydiv'>` 标签他的class是mydiv，通过js访问如下

$('div')[0].className

通过jQuery可以使用其提供的prop() 得到属性.

$('div').prop('class');

上面提到的attr也可以获取到class属性

$('div').attr('class');

这里需要注意的是prop 和 attr 的区别，prop是选择DOM属性, 而attr选择的是HTML页面上的属性也包括我们自定义的属性, 举个例子如下选择框

<input type="checkbox" checked="checked" />选择

分别用prpo和attr选择

$(':input').prop('checked');
    false
    
    $(':input').attr('checked');
    "checked"

可以看到得到的结果是不同的。

通过prop设置框为选中

$('input').prop('checked',true);

详细看这里[http://www.jb51.net/article/88068.htm][http_www.jb51.net_article_88068.htm]

###### 获取下拉框的值 ######

之前我都是通过选择索引方式

$('select')[0].selectedIndex

现在可以val()函数，直接获取内容。

$('select').val();

### DOM树操作 ###

--------------------

###### 创建新的元素 ######

在 `$()` 的括号中放入一组html即可变成jquery对象

var tag = $('<p>哈哈</p>');

###### 添加元素 ######

添加分为在标签的外部添加和内部添加  
外部添加

tag.insertAfter('#item1'); //在#item1的后面
    tag.insertBefore('#item1'); // 之前

内部添加

tag.appendTo('ul'); //ul内的末尾
    tag.prependTo('ul'); //ul内的开头

也可以先选择ul在将tag添加进来

$('ul').append(tag)

###### 移动元素 ######

通过一个例子了解下  
将span移动两个div其中的一个

两种写法都是一样的.

[http_www.jb51.net_article_88068.htm]: http://www.jb51.net/article/88068.htm

jquery 操作DOM

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery操作DOM元素

相关 JQuery的Dom操作

相关 jQuery操作dom节点

相关 jquery 操作DOM

相关 JQuery复习之JQuery操作DOM

相关 Jquery之DOM操作

相关 jQuery中的DOM操作

相关 jQuery操作DOM元素

相关 jQuery 对dom的操作

相关使用jQuery操作DOM