如果您对JS/JQuery操作DOM元素笔记和jquerydom操作感兴趣,那么这篇文章一定是您不可错过的。我们将详细讲解JS/JQuery操作DOM元素笔记的各种细节,并对jquerydom操作进行
如果您对JS/JQuery操作DOM元素笔记和jquery dom操作感兴趣,那么这篇文章一定是您不可错过的。我们将详细讲解JS/JQuery操作DOM元素笔记的各种细节,并对jquery dom操作进行深入的分析,此外还有关于3.jQuery操作DOM对象的方法、Dojo类似Jquery操作DOM的方法、jQuery Dom元素操作技巧、jquery 操作DOM元素(1)的实用技巧。
本文目录一览:- JS/JQuery操作DOM元素笔记(jquery dom操作)
- 3.jQuery操作DOM对象的方法
- Dojo类似Jquery操作DOM的方法
- jQuery Dom元素操作技巧
- jquery 操作DOM元素(1)
JS/JQuery操作DOM元素笔记(jquery dom操作)
原因
自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下。
页面大概是酱紫的(我使用的AdminLTE和LayUI,AdminLTE用的是一个大神改的,链接https://github.com/weituotian/AdminLTE-With-Iframe):
我的需求就是如果用户要用除查询之外的权限,必须要有查询权限才可以,如果没有查询权限,则不能具有其他权限,这里记录的只是前端JavaScript的操作,不包含后台验证。
比如我测试1下ces的管理选中的时候,要自动选中查询按钮。当查询按钮取消选中的时候,要把后边选中的按钮取消选中。
主要是操作DOM模拟点击:
$(''.layui-form-checkbox'').on(''click'',
function (e) {
debugger;
//如果是选中的话,判断是不是Query 查询权限,不是的话,要先选中查询权限
if (this.classList.contains("layui-form-checked")) {
//如果不是Query 并且Query 也没选中
if (this.previousElementSibling.name !== "Query" &&
!$(this).parent().find(''input[name="Query"]'').next()[0].classList.contains(
"layui-form-checked")) {
//让Query节点的那个点击选中
$(this).parent().find(''input[name="Query"]'').next().click();
}
} else {
//不是选中状态,判断是不是Query 如果是Query 取消选中,那么后边的也应该取消选中
if (this.previousElementSibling.name === "Query") {
$(this).parent().find(''input[name!="Query"]'').next().each(function(index, item) {
if (item.classList.contains("layui-form-checked")) {
$(item).click();
}
});
}
}
});
知识点
JQuery
jQuery.parent(expr)//找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)//类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
jQuery.children(expr)//返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
jQuery.contents()//返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点
jQuery.prev()//返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll()//返回所有之前的兄弟节点
jQuery.next()//返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll()//返回所有之后的兄弟节点
jQuery.siblings()//返回兄弟姐妹节点,不分前后
jQuery.find(expr)//跟jQuery.filter(expr)完全不一样:
jQuery.filter()//是从初始的jQuery对象集合中筛选出一部分,而
jQuery.find()//的返回结果,不会有初始集合中的内容,比如$("p").find("span"),是从<p>元素开始找<span>,等同于$("p span")
JavaScript
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSibling; //获得s的下一个兄弟节点
var ps=s.previousSibling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChild; //获得s的最后一个子节点
3.jQuery操作DOM对象的方法
以上是markdown格式的笔记
Dojo类似Jquery操作DOM的方法
导入NodeList-traverse包有下列方法:
jQuery Dom元素操作技巧
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和css-DOM。
jquery 获取父节点,兄弟节点,在节点内插入内容。
总结:在写js的时候,我们首先要确定是用的javaScript 还是jquery,因为两个写法不一样,方法名也不一样,不能混用。
以上所述是小编给大家介绍的jQuery Dom元素操作技巧,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
jquery 操作DOM元素(1)
.clone()
创建一个匹配的元素集合的深度拷贝。
.clone([withDataAndEvents])
withDataAndEvents (默认为false)
一个Boolean 表示是否会复制元素上的时间处理函数。
.clone([withDataAndEvents][,deepwithDataAndEvents])
withDataAndEvents (默认为false)
一个Boolean 表示是否会复制元素上的时间处理函数。
deepwithDataAndEvents
一个布尔值,指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。
$(".hello").clone().appendTo(".goodbye")
效果 :
.wrap()
在集合中匹配的每个元素周围包裹一个HTML 结构。
.wrap([wrappingElement])
wrappingElement 一个选择器,元素,html字符 jq 对象指定的html结构环绕包裹的匹配元素。
.wrap(function)
function 一个回调函数,返回用于包裹匹配元素的HTML内容或对象。
$('.inner').wrap('
结果:
$('inner').wrap(function(){
return '
.wrapAll()
在集合中所有的匹配元素的外褒一个HTML结构。
.wrapAll(wrappingElement)
wrappingElement
一个选择器,元素,html字符。
$('.inner').wrapAll('
.wrapAll(function)
function
一个回调函数。index 表示匹配元素在集合中的索引的位置。this 指向集合中的当前位置。
$("p").wrapAll($(".doublediv"));
在所有的"p"元素
.wraplnner()
在匹配元素里的内容外包一层结构。
.wraplnner(wrappingElement)
wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式,jquery对象 DOM 元素。
$('.inner').wrapInner('
.wraplnner(function(index))
function(index)
function 一个返回HTML结构的函数,用来包裹在匹配元素的外面 this 指匹配中的元素。
$("P").wrapInner(document.createElement("b"));
.append()
在每个匹配元素里面的末尾处插入参数内容。
.append(content[,content])
content DOM 元素 DOM 数组,HTML字符串 jquery 对象。
content 一个或多个DOM 元素,元素数组,HTML字符串。
Greetings
$('.inner').append('
Test
');效果:
Greetings
Test
Test
.append(function(index,html))
function(index,html)
返回一个html 字符串,DOM 元素,对象函数。this 指向元素集合中的当前元素。
I would like to say:
$('p').append(document.createTextNode("Hello"))
效果:
I would like to say: Hello
.appendTo()
将匹配的元素插入到目标元素的最后面
.appendTo(target)
target 一个选择符 ,元素,HTML 字符串,DOM 元素数组。
$('
Test
').appendTo('.inner');Test
Test
.html()
获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。
.html()
这个方法不接收任何元素。
$('div.demo-container').html();
获得到的结果
.html(htmlString)
htmlString 用来设置每一个匹配元素的HTML代码
.html(function(index oldHTML))
用来返回设置HTML内容的一个函数
$('div.demo-container').html('
All new content. You bet!
');效果如下:
All new content. You bet!
.prepend()
将参数内容插入到每个匹配元素的前面。(元素内容)
.prepend(content[,content])
DOM 元素,元素数组,HTML 字符串 对象。
$('.inner').prepend('
Test
');效果:
Test
Hello
Test
Goodbye
.prepend(function(index.html))
一个返回HTML字符串,DOM元素,jQuery对象的函数,该字符串用来插入到匹配元素的开始处
$("p").prepend(document.createTextNode("Hello "));
.prependTo()
将所有的元素插入到目标元素前面(元素内)。
.prependTo(target)
target 一个选择器,DOM元素,元素数组,HTML字符串,或者jQuery对象,将被插入到匹配元素前的内容。
$('
Test
').prependTo('.inner');效果:
Test
Hello
Test
Goodbye
.text()
得到匹配元素集合中每个元素的合并文本。包括他们的后代。
.text() 这个方法不接受任何参数。
- list item 1
- list item 2
$('div.demo-container').text()
效果如下:
Demonstration Box list item 1 list item 2
.text(textString)
设置匹配元素集合中每个元素的文本内容
.text(text)
用于设置匹配元素内容的文本。
.text( function(index,text) )
用来返回设置文本内容的一个函数。
$('div.demo-container').text('
This is a test.
');.text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。
总结
以上是小编为你收集整理的jquery 操作DOM元素(1)全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
jQuery相关文章
- • Jquery属性选择器(同时匹配多个条件,与
- • jquery的$().each,$.each 遍历对象和数
- • [JQ权威指南]动画表格排序插件TableSor
- • [JQ权威指南]使用JQuery调用XML实现无刷
- • [JQ权威指南]类级别插件开发
- • [JQ权威指南]validate验证插件
- • [JQ权威指南]SlideDown()与SlideUp()方
- • [JQ权威指南]animate() 方法
- • [JQ权威指南]对象级别插件的开发
- • [JQ权威指南]JQuery操作XML数据