jquerydom(jQuerydom添加边框删除边框边框变化)

http://www.itjxue.com  2023-01-29 06:32  来源:未知  点击次数: 

如何在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\\]")

(责任编辑:IT教学网)

更多

推荐浏览器文章