1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="jquery-1.11.2.min.js"></script>   //引入Jquery
  7. <style type="text/css">
  8. #d1
  9. {
  10.     font-size:24px;
  11. }
  12. .list
  13. {
  14.     width:200px;
  15.     height:30px;
  16.     text-align:center;
  17.     line-height:30px;
  18.     vertical-align:middle;
  19.     background-color:#999;
  20.     color:#F00;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26.  
  27. <div id="d1" name="div" ><b>第一个DIV</b></div>
  28.  
  29. <div class="d">22222</div>
  30. <div class="d">333333</div>
  31. <div class="d">444444</div>
  32.  
  33. <div class="list">hello</div>
  34. <div class="list">world</div>
  35. <div class="list">hai</div>
  36. <div class="list">aaaa</div>
  37.  
  38. <input type="text" bs="uid" />
  39.  
  40. <input type="checkbox" id="aa" value="hello" />
  41.  
  42. <input type="button" id='btn' value="取值"/>
  43.  
  44. </body>
  45. <script type="text/javascript">
  46.  
  47. //JS取元素，取出来的是具体的元素对象
  48. //var d = document.getElementById("d1");
  49. //alert(document.getElementsByClassName("d"));
  50. //alert(document.getElementsByTagName("div"));
  51. //alert(document.getElementsByName("uid"));
  52.  
  53. //操作内容
  54. //alert(d.innerText); //获取文本内容
  55. //alert(d.innerHTML); //获取HTML代码
  56. //d.innerText = "hello"; //给元素赋值（文本）
  57. //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码）
  58.  
  59. //d.value  获取或者设置表单元素的内容
  60.  
  61. //操作属性
  62. //alert(d.getAttribute("name")); //获取属性的值
  63. //d.setAttribute("bs","001"); //设置属性
  64. //d.removeAttribute("name"); //移除属性
  65.  
  66. //操作样式
  67. //alert(d.style.fontSize); //获取样式，必须是写在元素里面的
  68. //d.style.fontSize = "36px"; //修改设置样式
  69.  
  70. $(document).ready(function(e) {
  71.  
  72.     //Jquery取元素，取出来的是jquery对象
  73.     //var d = $("#d1"); //根据ID找
  74.     /*var d = $(".d"); //根据CLASS找
  75.  
  76.     for(var i=0;i<d.length;i++)
  77.     {
  78.         alert(d.eq(i));
  79.     }*/
  80.  
  81.     //alert($("div")); //根据标签名找
  82.  
  83.     //alert($("[bs=uid]")); //根据属性找
  84.  
  85.     //操作内容
  86.     //alert(d.text()); //获取元素的内容（文本）
  87.     //alert(d.html()); //获取元素的内容（HTML代码）    
  88.  
  89.     //d.text("hello"); //给元素赋值（文本）
  90.     //d.html("<span style='color:red'>hello</span>");    //给元素赋值（HTML代码）
  91.  
  92.     //d.val(); //操作表单的内容，可以取值赋值
  93.  
  94.     //操作属性
  95.     //alert(d.attr("name")); //获取属性
  96.     //d.attr("bs","001"); //设置属性
  97.     //d.removeAttr("bs"); //移除属性
  98.  
  99.     //操作样式
  100.     //alert(d.css("font-size")); //取样式
  101.     //d.css("font-size","36px"); //设置样式
  102.  
  103.     //事件
  104. /*    $("#d1").click(function (){
  105.  
  106.         alert("aa");
  107.  
  108.         })*/
  109.  
  110. /*    $(".d").click(function(){
  111.  
  112.         //alert($(this).text());
  113.  
  114.         })*/
  115.  
  116.     //菜单选中
  117.     $(".list").click(function(){
  118.  
  119.         //让所有元素变为非选中状态
  120.         $(".list").css("background-color","#999").css("color","#F00");
  121.  
  122.         //让该元素变为选中状态
  123.         $(this).css("background-color","#60F").css("color","#FFF");
  124.  
  125.         })
  126.  
  127.     //取checkbox选中值
  128.     $("#btn").click(function(){
  129.  
  130.         if($("#aa")[0].checked)
  131.         {
  132.             alert($("#aa").val());
  133.         }
  134.         else
  135.         {
  136.             alert("未选中！");
  137.         }
  138.  
  139.     })
  140.  
  141. });
  142.  
  143. </script>
  144. </html>

Jquery和JS的区别的更多相关文章

  1. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  2. jQuery与js的区别，并有基本语法详解，

    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...

  3. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  4. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  5. jquery.js和jquery.min.js的区别介绍

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  6. jquery.js和jquery.min.js的区别和springboot整合echarts.min.js

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  7. jQuery与JS的区别，以及jQuery的基础语法

    *在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...

  8. jquery与js的区别与基础操作

    一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  9. JQuery与js具体使用的区别（不全，初学）

    jQuery能大大简化Javascript程序的编写 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javasc ...

随机推荐

  1. Git Base 操作（二）

    1. 撤销修改 (1) 当改乱了工作区(working directory)某个文件的内容,想直接丢弃工作区中的修改时,用命令git checkout -- file. (2) 当不但改乱了工作区某个 ...

  2. 使用TensorFlow 来实现一个简单的验证码识别过程

    本文我们来用 TensorFlow 来实现一个深度学习模型,用来实现验证码识别的过程,这里识别的验证码是图形验证码,首先我们会用标注好的数据来训练一个模型,然后再用模型来实现这个验证码的识别. 1.验 ...

  3. codevs——2853 方格游戏（棋盘DP）

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解  题目描述 Description 菜菜看到了一个游戏,叫做方格游戏~ 游戏规则是这样的: 在一个n*n的 ...

  4. loj #100. 矩阵乘法

    题目描述 这是一道模板题. 分别给定 n×p n \times pn×p 和 p×m p \times mp×m 的两个矩阵 A AA 和 B BB,求 A×B A \times BA×B. 输入格式 ...

  5. Java中获取当前时间并格式化

    主要有两种方式,其中使用Date比较好控制,代码如下: //使用Calendar Calendar now = Calendar.getInstance(); System.out.println(& ...

  6. Concurrency(Locking, Blocking and Row Versioning)

    https://www.simple-talk.com/sql/t-sql-programming/row-versioning-concurrency-in-sql-server/?utm_sour ...

  7. c# winform 最小化到托盘

    STEP1.添加托盘图标控件NotifyIcon(直接从工具箱中拖动添加即可) STEP2.添加(重写)窗口尺寸变动函数Form1_Resize private void Main_SizeChang ...

  8. 网络库libevent、libev、libuv对比

    Libevent.libev.libuv三个网络库,都是c语言实现的异步事件库Asynchronousevent library). 异步事件库本质上是提供异步事件通知(Asynchronous Ev ...

  9. Data Leakage 因果性

    参考这篇: https://blog.csdn.net/jiandanjinxin/article/details/54633475 再论数据科学竞赛中的Data Leakage 存在和利用这种倒‘因 ...

  10. django导出数据到excel

    import xlwt,StringIodef dumpData(request): #获取数据 activitys = Activity.objects.all().order_by('id') i ...