GVKun编程网logo

JS/JQuery操作DOM元素笔记(jquery dom操作)

22

如果您对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操作)

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对象的方法

3.jQuery操作DOM对象的方法

# jQuery操作DOM 和 增删改查
- 1.html()
```js
$(''ul li'').html();//获取ul下第一个li元素下的内容
$(''ul li'').html(''9'');//把ul下所有li元素下的内容改为9
$(''ul li'').html(function(index, ele){
    return ''<p >''+ index +''</p>''
});//把ul下所有li元素下的内容改为return的内容
```

- 2.text() 
```js
$(''ul'').text();//获取ul元素的后代元素的所有文本节点
$(''ul li'').text(function(index, ele){
    return ''<p >''+ index +''</p>''
});//把ul下所有li元素下的内容改为return的字符串信息
```

- 3.size()
```js
$(''ul li'').size();//获取ul下li元素的个数
```

- 4.addClass()
```js
$(''.demo'').addClass(''demo1 demo2'');
$(''.demo'').addClass(function(index, ele){
    return ''demo1'';//在原来demo''的基础上,加上demo1
});
```

- 5.removeClass() 移除class

- 6.hasClass() 是否拥有某个class名

- 7.css() 
```js
$(''.demo'').css({width:''100px'', height:''100px'', backgroundColor:''red''});//赋值操作
$(''.demo'').css(''width'');//取值操作
```

- 8.attr() 基于setAttribute getAttribute 自定义属性,和行间属性
```js
$(''.demo'').attr(''class'');//取值
$(''.demo'').attr(''class'', ''wrapper'');//赋值
```

- 9.prop() 基于原生JS的dom对象的特性操作,特性映射,非特性不能映射
```js
$(''.demo'').prop(''class'');//取值,对于自定义属性不能取值
$(''.demo'').prop(''checked'');//取值,对于自定义属性不能取值
$(''.demo'').prop(''class'', ''wrapper'');//赋值
```

- 10.val() 取值和赋值操作,赋和取表单元素相关的值
```js
$(''input'').val();//取值
$(''input'').val(''123'');//赋值
$(''input[type="checkbox"]'').val(function(index, oldValue){
    return oldValue + index;
});
```

## 增删改查操作

### 查找
- 1.next() 获取下一个兄弟元素节点

- 2.prev() 获取上一个兄弟元素节点

- 3.prevAll() 获取同级的下面兄弟元素节点

- 4.nextAll() 获取同级的上面的兄弟元素节点

- 5.prevUntil() 获取同级的上面的兄弟元素,直到XXX为止

- 6.nextUntil() 获取同级的下面的兄弟元素,直到XXX为止
```js
$(h1).next().click(function(){
    if($(this).prop(''checked'')){
        $(this).nextUntil(''h1'', ''input[type="checkbox"]'').prop(''checked'', true);//找到同级的下面的元素,直到h1元素为止,且只找到里面input[type="checkbox"]的元素
    }else{
        $(this).nextUntil(''h1'', ''input[type="checkbox"]'').prop(''checked'', false);//
    }
});
```

- 7.siblings() 获取到同级元素的所有兄弟元素节点
```js
$(''.demo'').siblings(''span'');//获取到同级的所有span元素
```

- 8.parent() 获取到上一级元素节点

- 9.parents() 获取到所有祖先元素节点

- 10.offsetParent() 获取离自己最近的有定位的祖先元素

- 11.closest() 获得匹配选择器的第一个祖先元素,从自己(当前元素)开始沿 DOM 树向上。

- 12.slice() 截取元素
```js
$(''.demo'').slice(1, 2);//截取第一个到第二个元素(不包括第二个元素)
```

### 增加 改变元素
- 13.insertBefore()
```js
$(''.content'').insertBefore(''.box'');//在.box之前插入.content
```

- 14.before()
```js
$(''.box'').before( $(''.content'') );//在.box之前插入.content
```

- 15.insertAfter()
```js
$(''.content'').insertAfter(''.box'');//在.box之后插入.content
```

- 16.after()
```js
$(''.box'').after( $(''.content'') );//在.box之后插入.content
```

- 17.appendTo()
```js
$(''.demo'').appendTo(''.container'');//把.demo添加到.container元素里面成为最后一个子元素,剪切操作
```

- 18.append()
```js
$(''.container'').append( $(''.demo'') );//把.demo添加到.container里面成为最后一个子元素,剪切操作
```

- 19.prependTo()
```js
$(''.demo'').prependTo(''.container'');//把.demo添加到.container元素里面成为第一个子元素,剪切操作
```

- 20.prepend()
```js
$(''.container'').prependTo( $(''.demo'') );//把.demo添加到.container里面成为最后一个子元素,剪切操作
```

### 删除元素

- 21.remove()
```js
$(''.demo'').remove().appendTo(''.container'');//先删除.demo元素,后把.demo元素添加到.container元素里面成为最后一个子元素。这样删除的.demo元素,自身捆绑的事件(click, blur等)就会同时删除
```

- 22.detach()
```js
$(''.demo'').detach().appendTo(''.container'');//先删除.demo元素,后把.demo元素添加到.container元素里面成为最后一个子元素。这样删除的.demo元素,自身捆绑的事件(click, blur等)不会同时删除
```

### 添加包裹元素

- 23.wrap()
```js
    $(''.demo'').wrap(''<div ></div>'');//为.demo元素包裹一层wrap()函数中的元素,对wrap()函数中的元素进行复制操作
    $(''demo'').wrap(fuction(index){
        return ''<div>'' + index + ''</div>'';
    });//为每一个.demo元素都包裹一层return的元素
```

- 24.wrapInner()
```js
    $(''.demo'').wrapInner(''<div ></div>'');//把.demo里面的元素包裹一层wrap()函数中的元素
```

- 25.wrapAll()
```js
    $(''.demo'').wrapAll(''<div ></div>'');//给所有的.demo加上一个统一的父元素.container,注意所有的.demo元素最好是同级元素
```

- 25.unwrap()
```js
    $(''.demo'').unwrap();//把.demo的直接父级删掉
```

### 特殊的
$() 创建jQuery对象
```js
$(''<div></div>'');//可以直接通过$()创建一个jQuery对象
```

以上是markdown格式的笔记







































Dojo类似Jquery操作DOM的方法

Dojo类似Jquery操作DOM的方法

导入NodeList-traverse包
dojo.require("dojo.NodeList-traverse");
有下列方法:
dojo.query("#id").next();//当前节点的下一个节点 dojo.query("#id").prev();//当前节点的上一个节点 dojo.query("#id").prevAll();//当前节点的上面的所有节点 dojo.query("#id").nextAll();//当前节点的下面的所有节点 dojo.query("#id").closest();//离当前节点最近的父节点 dojo.query("#id").children();//当前节点下所有的子节点 dojo.query("#id").parent();//当前节点的父节点 dojo.query("#id").parents();//当前节点的所有父节点 dojo.query("#id").siblings();//当前节点的所有兄弟节点 dojo.query(".class").first();//返回查询到的第一个节点 dojo.query(".class").last();//返回查询到的最后一个节点 dojo.query(".class").even();//返回奇数节点 dojo.query(".class").odd(); //返回偶数节点

jQuery Dom元素操作技巧

jQuery Dom元素操作技巧

Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和css-DOM。

jquery 获取父节点,兄弟节点,在节点内插入内容。

rush:js;"> ①$("#test1").parent() // 父节点 ②$("#test1").next() //下一个节点 ③$("#test1").append('
'); //在节点内插入内容。 ④匹配到指定的元素 $("#test1").parent().next().find(".error_info");

总结:在写js的时候,我们首先要确定是用的javaScript 还是jquery,因为两个写法不一样,方法名也不一样,不能混用。

以上所述是小编给大家介绍的jQuery Dom元素操作技巧,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jquery 操作DOM元素(1)

jquery 操作DOM元素(1)

.clone()
  创建一个匹配的元素集合的深度拷贝。
  .clone([withDataAndEvents])
    withDataAndEvents (默认为false)
      一个Boolean 表示是否会复制元素上的时间处理函数。
  .clone([withDataAndEvents][,deepwithDataAndEvents])
    withDataAndEvents (默认为false)
      一个Boolean 表示是否会复制元素上的时间处理函数。
    deepwithDataAndEvents
      一个布尔值,指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。

      $(".hello").clone().appendTo(".goodbye")
      效果 :


               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


                          Hello
          

Test


        
                   Goodbye
        

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');
                    Hello
        

Test


      
               Goodbye
        

Test


      
    


.html()
  获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。
  .html()
    这个方法不接收任何元素。
    

      Box">Demonstration Box
    
    $('div.demo-container').html();
    获得到的结果
    Box">Demonstration Box
  .html(htmlString)
    htmlString 用来设置每一个匹配元素的HTML代码
  .html(function(index oldHTML))
    用来返回设置HTML内容的一个函数
           Box">Demonstration Box
    
    $('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() 这个方法不接受任何参数。
  

    Box">Demonstration Box
    

          
  • 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属性选择器(同时匹配多个条件,与或非)(附样例)
1. 前言为了处理除了两项不符合条件外的选择,需要用到jquery选择器的多个条件匹配来处理,然后整理了一下相关的与或非的条件及其组合。作为笔记记录。2. 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
jquery的$().each,$.each 遍历对象和数组
原文链接 http://www.frontopen.com/1394.html在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbo...
[JQ权威指南]动画表格排序插件TableSort
转自:https://yq.aliyun.com/articles/20669 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"><
[JQ权威指南]使用JQuery调用XML实现无刷新即时聊天
HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>使用JQuery调用XML
[JQ权威指南]类级别插件开发
(1)功能描述:新增两个类级别的全局函数,分别用于计算两数之和与两数之差,并将结果返回调用的页面中。 (2)JS/// <reference path="jquery-1.4.2-vsdoc.js"/>/// <reference path="jquery-1.4.2.js"/>/*--------------------------------------------------------
[JQ权威指南]validate验证插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>validate验证插件</tit
[JQ权威指南]SlideDown()与SlideUp()方法实现滑动效果
SildeDown()与slideUp()方法 body{font-size:13px} .divFrame{width:86px; border:solid 1px #666} .divFrame.divTitle{ padding:5px; background-color:#eee} .divFrame.divContent{padding:8px} .divFrame.div
[JQ权威指南]animate() 方法
定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。 只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。 注释:使用 “+=” 或 “-=” 来创建相对动画(relative anima
  • • Jquery属性选择器(同时匹配多个条件,与
  • • jquery的$().each,$.each 遍历对象和数
  • • [JQ权威指南]动画表格排序插件TableSor
  • • [JQ权威指南]使用JQuery调用XML实现无刷
  • • [JQ权威指南]类级别插件开发
  • • [JQ权威指南]validate验证插件
  • • [JQ权威指南]SlideDown()与SlideUp()方
  • • [JQ权威指南]animate() 方法
  • • [JQ权威指南]对象级别插件的开发
  • • [JQ权威指南]JQuery操作XML数据
HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-
  • 友情链接:
  • 菜鸟教程
  • 前端之家
  • 编程小课
  • 小编
  • -
  • 我要投稿
  • -
  • 广告合作
  • -
  • 联系我们
  • -
  • 免责声明
  • -
  • 网站地图
版权所有 © 2018 小编 闽ICP备13020303号-8
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜"程序精选"关注
微信扫一扫可直接关注哦!

我们今天的关于JS/JQuery操作DOM元素笔记jquery dom操作的分享就到这里,谢谢您的阅读,如果想了解更多关于3.jQuery操作DOM对象的方法、Dojo类似Jquery操作DOM的方法、jQuery Dom元素操作技巧、jquery 操作DOM元素(1)的相关信息,可以在本站进行搜索。

本文标签: