jquery 操作DOM 亦凉 2022-05-26 23:20 214阅读 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][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')); } } [http_www.jb51.net_article_88068.htm]: http://www.jb51.net/article/88068.htm
还没有评论,来说两句吧...