1删除元素remove，empty

remove()   和 empty()的区别

remove：包括选中的元素包括其子元素，

empty：清除其子元素。

2.css属性

多属性使用{}括起来。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-css</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $("button").click(function () {

                 $("#div1").css({"background":"blue","border":"solid wheat"}) //多属性

                 $("#div2").css({"background":"purple","border":"solid red"})

             })

         })

     </script>

 </head>

 <body>

 <button>提交</button>

 <div id="div1">div1</div>

 <div id="div2">div2</div>

 </body>

 </html>

　　　　　　　　

　　　　　　$即将进入JQ的遍历。

1.parent 被选元素的直接父元素。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-遍历</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $("#span").parent().css({"color":"red","border":"solid red"})

         })

     </script>

 </head>

 <body>

 <!--灰色标注为初始颜色-->

 <div id="div" style="border: grey solid">

     div元素

     <ul id="ul" style="border: grey solid">

         ul元素

         <li id="li" style="border: grey solid">

             li元素

             <br><span id="span" style="border: grey solid" >

                 sp元素

             </span>

         </li>

     </ul>

 </div>

 </body>

 </html>

2.parents 选元素的所有祖先元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-遍历</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $("#span").parents().css({"color":"red","border":"solid red"})

         })

     </script>

 </head>

 <body>

 <!--灰色标注为初始颜色-->

 <div id="div" style="border: grey solid">

     div元素

     <ul id="ul" style="border: grey solid">

         ul元素

         <li id="li" style="border: grey solid">

             li元素

             <br><span id="span" style="border: grey solid">

                 sp元素

             </span>

         </li>

     </ul>

 </div>

 </body>

 </html>

3.返回介于两个给定元素之间的所有祖先元素。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-遍历</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $("#span").parentsUntil("#div").css({"color":"red","border":"solid red"})

         })

     </script>

 </head>

 <body>

 <!--灰色标注为初始颜色-->

 <div id="div" style="border: grey solid">

     div元素

     <ul id="ul" style="border: grey solid">

         ul元素

         <li id="li" style="border: grey solid">

             li元素

             <br><span id="span" style="border: grey solid">

                 sp元素

             </span>

         </li>

     </ul>

 </div>

 </body>

 </html>

Jquery remove() empty() css()的更多相关文章

  1. jquery remove/add css

    <input type="submit" class="btn btn-primary" id="submit" value=&quo ...

  2. jQuery remove()与jQuery empty()的区别

    jQuery remove() 方法删除被选元素及其子元素.举例如下: <!DOCTYPE html> <html> <head> <script src=& ...

  3. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  6. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  7. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  8. jQuery修改操作css属性实现方法

    在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() ...

  9. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

随机推荐

  1. Vue.js：组件

    ylbtech-Vue.js:组件 1.返回顶部 1. Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让 ...

  2. modelform实例学习

    先来回顾下form的用法 一对多关系,form显示的是下拉框 多对多关系,form显示的是多选框 modelform的用法 modelsform的写法 from django.forms import ...

  3. python开发IO模型:阻塞&非阻塞&异步IO&多路复用&selectors

    一 IO模型介绍 为了更好地了解IO模型,我们需要事先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非 ...

  4. AOP（面向切面编程概念，本文为翻译）

    AOP是什么 AOP为Aspect Oriented Programming的缩写.AOP是OOP的延续,是软件开发中的一个热点,也是Spring框架中的一个重要内容,是函数式编程的一种衍生范型.利用 ...

  5. PHP函数(一)-变量

    1.全局变量 <?php $a = 1; $b = 2; function test(){ echo $a + $b."<br>"; //运行结果为0 } tes ...

  6. 用exp、dmp导入导出用户到同一个实例下时，类型type会有问题

    oralce的type都有唯一id,在同一个实例下,通过导入导出方法创建type时,会有唯一性问题 最好的解决方法使用impdb,expdb的方式导入导出 用oid=n解决. 实在不行,可用稍微麻烦的 ...

  7. ORACLE和MYSQL函数

    函数 编号 类别 ORACLE MYSQL 注释 1 数字函数 round(1.23456,4) round(1.23456,4) 一样: ORACLE:select round(1.23456,4) ...

  8. 14-jQuery的ajax

    什么是ajax AJAX  =  异步的JavaScript 和 XML (Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据 ...

  9. Java面向对象作业-用接口方式测试向下转型

    Java面向对象作业-用接口方式测试向下转型 根据视频的里实例 我们直接修改Test2测试方法: package com.java1234.chap03.sec13; public class Tes ...

  10. Springboot热部署（热部署原理）和用IDEA开发需要的配置

    热部署原理 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s ...