jquerydom(jQuerydom添加边框删除边框边框变化)
如何在jquery中操作DOM
一、选取DOM元素
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。
var $ = document.querySelectorAll.bind(document);
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。
二、DOM操作
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery写法
$(parent).append($(child));
// DOM写法
parent.appendChild(child)
头部插入DOM元素。
// jQuery写法
$(parent).prepend($(child));
// DOM写法
parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
// jQuery写法
$(child).remove()
// DOM写法
child.parentNode.removeChild(child)
jquery选择器与原生选择器选择DOM结果不同?
当然不同,jq选择器选择的结果是经过封装的dom对象(可以叫做jquery对象),添加了jq自身的一些专有的属性和方法,比如 $('.xxx').index(),而原生的dom对象却不能这样用。
通过简单的方法就能在原生dom对象与jquery对象之间转换:
假如a是dom对象,那么$(a)就是转换后的jquery对象;
假如a是jquery对象,那么a[0]就是转换后的dom对象
如何区分jquery对象和dom对象
深刻了解jQuery对象和普通DOM对象的区别。互相转化见Q1
Q1,js的写法:document.getElementById('save').disabled=true;
在jquery中我是这样写的$("#save").disabled = true; 为什么没效果呢
A,这个是典型的问题,其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象
这是新手常见的问题。
解决方法有2:
1,用JQ写法,$("#save").attr("disabled","true");
2,转成DOM写法$("#save")[0].disabled=true;
当然,$("#save")[0]也可以写成$("#save").get(0)。他返回的也是DOM元素
$("#save").eq(0)得到的还是jq对象
$(dom对象)就能得到一个jq对象。
Q2,获取选中的checkbox
A:
获取所有选中的checkbox:
$("input:checkbox:checked")
判断是否一组checkbox都选中了:
if($("input:checkbox:checked").length){}
判断某一个checkbox是否被选中
if($("input:checkbox").is(":checked")){}
Q3,我的id里有[]或.之类的符号,怎么办?或者带有命名空间的xml标签带有:怎么办?
A:用\\来转义如div id="id[1]"/div
$("#id\\[1\\]")