####JQuery的基本语法

  1. <!--导入JQuery文件-->
  2. <script src="js/jquery-3.1.1.min.js">
  3.     /*带min的是压缩后的JQuery*/
  4. </script>
  6. <!--JQuery文档就绪函数
  7. 文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery
  8. $(document).ready(function(){ ---jQuery functions go here --- })
  9. -->
  11. <script type="text/javascript">
  12.     // hide隐藏元素
  13.     // show显示元素
  14.     $(document).ready(function(){
  15.         $('p').hide();
  16.     });
  18.     //文档就绪函数 ：简化
  19.     $(function(){
  20.         $('p').hide();
  21.     })
  23. </script>
  25. <body>
  26. <p>这是p标签的第一段内容</p>
  27. <h2>这是p标签的第二段内容</h2>
  28. <!--<script type="text/javascript">
  29.     // hide隐藏元素
  30.     // show显示元素
  31.     $('p').hide();
  32. </script>-->
  33. </body>

####DOM节点操作 创建和删除

  1. <script src="js/jquery-3.1.1.min.js"></script>
  2. <script type="text/javascript">
  3.     $(function(){
  4.         //添加节点
  5.         var table = $("<table><tr>tr内容</tr></table>");
  6.         $("div").append(table);
  7.     })
  9.     //删除节点
  10.     $(function(){
  11.     var table = $("<table id='t'><tr>tr内容</tr></table>");
  12.     $("div").append(table);
  13.     table.remove();
  14.     //克隆
  15.     table.clone().appendTo("div");
  16.     })
  17. </script>
  19. <body>
  20. <div></div>
  21. </body>

####CSS操作 循环转播

  1. <!--引入jquery-->
  2. <style type="text/css">
  3.     div{
  4.         height: 300px;
  5.         width: 300px;
  6.         background-color: orange;
  7.     }
  8.     .a{
  9.         background-color: blue;
  10.     }
  11. </style>
  12. <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  13. <script type="text/javascript">
  14.     $(function(){
  15.         $("#d").mouseover(function(){
  16.             $(this).toggleClass('a');
  17.             //$(this).addClass('a');
  18.         }).mouseout(function(){
  19.             $(this).toggleClass('a');
  20.             //$(this).removeClass('a');
  21.         });
  22.     })
  23. </script>
  25. <body>
  26. <div id="d">
  27.     sdkfjs
  28. </div>
  29. </body>

####CSS操作

  1. <!--引入jquery-->
  2. <style type="text/css">
  3.    div{
  4.       height: 300px;
  5.       width: 300px;
  6.       background-color: orange;
  7.    }
  8.    .a{
  9.       background-color: blue;
  10.    }
  11. </style>
  12. <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  13. <script type="text/javascript">
  14.    $(function(){
  15.       $("#d").mouseover(function(){
  16.          $(this).addClass('a');
  17.       }).mouseout(function(){
  18.          $(this).removeClass('a');
  19.       });
  20.    })
  21. </script>
  23. <body>
  24.    <div id="d">
  25.       sdkfjs
  26.    </div>
  27. </body>

####通过jQuery修改CSS样式

  1.     <script src="js/jquery-3.1.1.min.js"></script>
  2.     <script type="text/javascript">
  3.        $(function(){
  4.            //一个属性
  5. /*           $("div").css('background-color','red');*/
  7.            //多个属性
  8.            $("div").css({'background-color':'red','height':'100px',"width":"50px"});
  9.        })
  10.     </script>
  12. <div>
  13.     div中的内容
  14. </div>

####操作元素属性

  1.     <script src="js/jquery-3.1.1.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(function(){
  4.             //获取input的name属性值
  5. /*            alert($('input').attr('name'));*/
  7.             //修改input的name属性值
  8. /*            $("input").attr('name','name被修改的属性值');
  9.             $("input").attr('type','password');
  10.             $("input").attr('id','text');*/
  12.             //一次性修改以上三个内容
  13.             //修改元素的所有属性值
  14.             $("input").attr({'name':'name值','type':'password','id':'id值'})
  15.             //多个属性值一起修改，调用attr方法，把所有要修改的属性放在{ }中，属性之间用 , 分隔
  16.             //属性名与属性值之间用 : 隔开
  17.         })
  18.     </script>
  20. <body>
  21. <input type="text" name="ipt" value=""/>
  22. </body>

####解决多库冲突

  1. <script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  2. <script type="text/javascript">
  3.    $(function(){
  4.       //放弃$符号
  5.       jQuery.noConflict();
  6.       jQuery("#a").html('sddsdsdfsdfs')
  8.    })
  9. </script>
  11. <body>
  12.    <div id="a"></div>
  13. </body>

####JS对象与JQuery对象相互转换

  1.     <script src="js/jquery-3.1.1.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(function(){
  4.             //原生的JS对象与JQuery对象不是一个概念，二者不可互相调用
  5.             var d = document.getElementById('d');
  7. /*            //JS的方式添加内容
  8.             d.innerText = '添加的内容';*/
  10.             //原生DOM（JS对象）转换为JQuery对象：$(原生对象)
  11.             $(d).html('将d放在$符号当中转换');
  13.             //JQuery方式
  14.             var d = $('#d');
  15.             //JQuery的方法调用ID为d的对象
  16.             d.html('JQuery添加的内容');
  18.             var e = $("#e");
  19.             //这个不能实现
  20.             // e.innerText('JQuery对象不能直接调用JS的原生方法');
  21.             //JQuery对象转原生对象：$(...)[0]  转原生对象用下标，只能用下标为0转换。
  22.             e[0].innerText('JQuery对象不能直接调用JS的原生方法');
  23.             //方法二： $(...).get(0)
  24.             e.get(0).innerText('通过get方法添加的内容');
  26.         })
  27.     </script>
  29. <body>
  30. <div id="d"></div>
  31. <div id="e"></div>
  32. </body>

JQuery——相关练习的更多相关文章

  1. JQuery 相关用法和操作

    01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...

  2. jQuery相关知识总结

    1 encodeURIComponent(city)处理js传值乱码问题 2 总体概述 以后项目如果没有特殊情况,一般采用jQuery作为最基础的公共底层库. 另外对于前端的javascript相关的 ...

  3. 【转】JQUERY相关的几个网站

    作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的. 2. Filmament ...

  4. jQuery相关面试题

    1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境 下载jqu ...

  5. 【summary】JQuery 相关css、ajax、数据操作函数或方法

    总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...

  6. 学习MVC和jQuery相关的书

    Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书:   十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...

  7. JQUERY相关

    https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...

  8. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  9. jquery相关校验以及jquery其他知识总结

    //************jquery校验**********/ //数字校验(整数)function isDigit(str) { var patrn=/^[0-9]*$/; return pat ...

  10. jquery 相关class属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Redis主从复制getshell技巧

    Redis未授权漏洞常见的漏洞利用方式: Windows下,绝对路径写webshell .写入启动项. Linux下,绝对路径写webshell .公私钥认证获取root权限 .利用contrab计划 ...

  2. Linux服务器上搭建测试环境（war包+tomcat）

    悟空CRM项目环境部署(Java war项目) 在/root目录下创建一个文件夹(名字自取). ls命令查看一下是否创建成功,看到了新建的文件夹说明创建成功. tomcat和war包的准备:可以使用X ...

  3. 冒泡排序算法JAVA实现版

    /***关于冒泡排序,从性能最低版本实现到性能最优版本实现*/public class BubbleSortDemo { public static void sort(int array[]) { ...

  4. TurtleBot3使用课程-第一节a（北京智能佳）

    目录 1.ROS设置(远程PC) 2 1.1 ROS安装和设置 2 1.1.1 设置source.list 2 1.1.2 键设置 2 1.1.3 ROS安装 2 1.1.4安装包构建的依赖关系 2 ...

  5. SpringBoot整合sa-token，完成网站权限验证

    sa-token是什么? sa-token是一个JavaWeb轻量级权限认证框架,其API调用非常简单,有多简单呢?以登录验证为例,你只需要: // 在登录时写入当前会话的账号id StpUtil.s ...

  6. 日常入坑1-Calendar类

    1.当前时间是一号的时候,通过计算上一天的日期的时候,需要注意了 Calendar calendar = Calendar.getInstance();calendar.set(2019,10,1); ...

  7. go语言环境搭建以及配置VSCode

    Go语言学习笔记(环境安装)-day01 Go语言运行环境安装 下载Go安装包 安装包地址 安装Go语言运行环境 ​ 直接在下载好的目录双击运行*.msi的可执行文件,下一步进行安装,安装的目录最好是 ...

  8. (开源项目)abattoir unity游戏

    (开源项目)abattoir unity游戏 欢迎各位的改进和提议! 名称: abattoir(角斗场) 版本: v1.0 作者: N-n-N(笔者) 简介: 添加娱乐(冲撞)模式和普通(一般)模式 ...

  9. Linux 中软链接和硬链接的使用

    Linux 链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link). 硬链接和软链接 硬链接 --- ln 要链接的文件 新硬链接名 软连接 --- l ...

  10. 【Oracle】Oracle 10g下载路径

    ORACLE 10g下载地址 下载方法: 直接复制下面的链接,打开迅雷,自动会识别下载的内容 Oracle Database 10g Release 2 (10.2.0.1.0) Enterprise ...