jquery 操作DOM-蒲公英云

jquery 操作DOM

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

操作属性

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

<div class='mydiv'>
        <ul>
            <li id='item1'><a href='http://www.360.com'>a1</a></li>
            <li id='item2'><a href='#'>a2</a></li>
        </ul>
    </div>

获取第一个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

获取下拉框的值

<select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>

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

$('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其中的一个

<div id='div1' style="border: 1px solid black; height: 100px;">
    </div>
    <div id='div2' style="border: 1px solid red; height: 100px;">
    </div>
    <span id='sp'>我要移动</span>
    <button onclick="spanmove(1)">移动到1</button>
    <button onclick="spanmove(2)">移动到2</button>

两种写法都是一样的.

function spanmove(i){
        if (i == 1){
            //$('#div1').append($('#sp'));
            $('#sp').appendTo($('#div1'));
        }else{
            //$('#div2').append($('#sp'));    
            $('#sp').appendTo($('#div2'));
        }
    }