JQUERY与JS的区别

  1.  
  1. <style type="text/css">
  1. #aa
  2. {
  3.     width:200px;
  4.     height:200px;
  5. }
  6. </style>
  7. <script src="jquery-1.11.2.min.js"></script>
  8. </head>

  9. <body>
  10. <div id="aa" style="">hello</div>
  11. <div class="bb"></div>
  12. <div class="bb"></div>
  13. <div class="bb"></div>
  14. <input type="text" name="cc" bs="dd" />
  15. </body>
  16. <script type="text/javascript">
  17. JS：
  18. //根据ID找元素,找到具体的DOM对象
  19. var d = document.getElementById("aa");
  20. var c = document.getElementsByClassName("bb");
  21. var div = document.getElementsByTagName("div");
  22. var input = document.getElementsByName("cc");
  23.  
  24. //操作内容
  25. //1.非表单元素
  26. d.innerHTML; d.innerTEXT;
  27. //2.表单元素
  28. d.value;
  29.  
  30. //操作属性
  31. d.setAttribute("bs","pp"); //添加属性
  32. d.getAttribute("bs");//获取属性
  33. d.removeAttribute("bs");//移除属性
  34.  
  35. //操作样式
  36. //d.style.color = "red";
  37. //d.style.backgroundColor = "yellow";
  38. //alert(d.style.width);

  39. JQUERY：
  40. $(document).ready(function(e) {
  41.  
  42.     //根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素
  43.     var jd = $("#aa"); //根据ID
  44.     var jc = $(".bb"); //根据Class
  45.     var di = $("div"); //根据标签名
  46.     var ip = $("input[bs=dd]");//根据属性筛选
  47.  
  48.     for(var i=;i<jc.length;i++)
  49.     {
  50.         jc.eq(i); //取数组里面的第几个JQUERY对象
  51.     }
  52.  
  53.     //操作内容
  54.     //1.非表单元素
  55.     jd.text();  jd.text("aa");
  56.     jd.html();  jd.html("vv");
  57.     //2.表单元素
  58.     jd.val();
  59.  
  60.     //属性操作
  61.     jd.attr("bs","aa");//设置属性
  62.     jd.attr("bs"); //获取属性
  63.     jd.removeAttr("bs");//移除属性
  64.  
  65.     //操作样式
  66.     jd.css("background-color","green");
  67.     //alert(jd.css("width"));
  68.  
  69.     //给一个元素加事件
  70.     /*$("#aa").click(function(){
  71.  
  72.         alert("aa");
  73.  
  74.         })*/
  75.     //给多个元素加事件
  76.     /*$(".bb").click(function(){
  77.  
  78.         alert($(this).text());
  79.  
  80.         })*/
  81.  
  82.     //给多个元素设置相同样式(属性)
  83.     //$(".bb").css("color","pink");
  84.  
  85. });
  86.  
  87. </script>

例：

  1. <body>
  2.  
  3. <input type="checkbox" id="all" /> 全选<br />
  4. <input class="t" type="checkbox" value="aa" /> aa
  5. <input class="t" type="checkbox" value="bb" /> bb
  6. <input class="t" type="checkbox" value="cc" /> cc
  7. <input class="t" type="checkbox" value="dd" /> dd
  8. <input class="t" type="checkbox" value="ee" /> ee
  9.  
  10. <input type="button" value="测试" id="btn" />
  11. <input type="text" id="txt" />
  12. <input type="button" value="设置选中" id="sel" />
  13.  
  14. </body>
  1. <script src="jquery-1.11.2.min.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(document).ready(function(e) {
  5.  
  6.     //全选
  7.     $("#all").click(function(){
  8.  
  9.         var ck = $(".t");
  10.         var xz = $(this)[0].checked;
  11.  
  12.         ck.prop("checked",xz);
  13.  
  14.         })
  15.  
  16.     //取选中项的值
  17.     $("#btn").click(function(){
  18.  
  19.         var ck = $(".t");
  20.         for(var i=0; i<ck.length;i++)
  21.         {
  22.             if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
  23.             {
  24.                 alert(ck.eq(i).val());
  25.             }
  26.         }
  27.  
  28.         })
  29.  
  30.     //设置某项选中
  31.     $("#sel").click(function(){
  32.  
  33.         var v = $("#txt").val();
  34.  
  35.         var ck = $(".t");
  36.         ck.prop("checked",false);
  37.         for(var i=0;i<ck.length;i++)
  38.         {
  39.             if(ck.eq(i).val()==v)
  40.             {
  41.                 ck.eq(i).prop("checked",true);
  42.             }
  43.         }
  44.         })
  45. });
  46.  
  47. </script>

JQUERY与JS的区别的更多相关文章

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

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

  2. jQuery于js的区别和联系

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

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

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

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

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

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

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

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

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

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

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

  8. Jquery和JS的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

随机推荐

  1. android 开发-自定义多节点进度条显示

    看效果图: 里面的线段颜色和节点图标都是可以自定义的. main.xml <RelativeLayout xmlns:android="http://schemas.android.c ...

  2. 4、android xml中drawableTop（drawableBoottom、drawableLeft、drawableRight）在java代码中的动态配置

    做安卓开发的朋友都知道,我们在xml中可以通过这样来对button设置其上部或者(下.左.右)的图片资源: 那么如果需要动态配置图片呢?我们不得不使用java代码来进行操作: Drawable dra ...

  3. Memcached常用命令及使用说明

    一.存储命令 存储命令的格式: 1 2 <command name> <key> <flags> <exptime> <bytes> < ...

  4. JS范围

    JS API-->DOM/PoneGap/Cordova/Android/NodeJS JS OOP

  5. HDOJ 1709 The Balance(母函数)

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. rpc 小例子

    RpcFramework /* * Copyright 2011 Alibaba.com All right reserved. This software is the * confidential ...

  7. Using the viewport meta tag to control layout on mobile browsers

    A typical mobile-optimized site contains something like the following: <meta name="viewport& ...

  8. 7 天玩转 ASP.NET MVC - 第 1 天

    0. 前言 正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET ...

  9. 【QT】找茬外挂制作

    找茬外挂制作 找茬游戏大家肯定都很熟悉吧,两张类似的图片,找里面的不同.在下眼神不大好,经常瞪图片半天也找不到区别.于是乎决定做个辅助工具来解放一下自己的双眼. 一.使用工具 Qt:主要是用来做界面的 ...

  10. iOS第三方（显示视图的宽度高度）－ MMPlaceHolder

    github:https://github.com/adad184/MMPlaceHolder#readme appDelegate添加,影响全局 [MMPlaceHolderConfig defau ...