`

js&jquery对比

阅读更多
备用
1、获取元素
   var info=document.getElementById("tex1");
   var info=$("#tex1");
2、获取值
   var info=document.getElementById("tex1").value;
   var info=$("#tex1").val();
   //对于文本框等有value属性的(例如input、radio、checkbox等)可以使用上面的方法,没有value属性的(例如div、span、p等)可以使用下面的
   var info=document.getElementById("tex1").innerHTML;
   var info=$("#tex1").text();
3、赋值
    var info=document.getElementById("p1").value="123";
    var info=$("#tex1").val("123");
    //对于文本框等有value属性的(例如input、radio、checkbox等)可以使用上面的方法,没有value属性的(例如div、span、p等)可以使用下面的
    var info=document.getElementById("tex1").innerHTML;
    var info=$("#tex1").text("123");
4、添加元素
   a对象.appendChild(b对象)    将b对象添加到a里面 (动态下拉框js实现)
   a对象.appendChildTo(b对象)  将a添加到b         (动态下拉框jquery实现)
5、移除元素
   document.getElementById("ul").removeChild(当前元素);//只能移除子元素
   $("#div1").remove();//可以移除当前元素
6、创建元素
   var newNode = document.createElement("P");//创建一个P标签  
   var select = $("<select/>").appendTo($("body"));//在body里面创建一个下拉框
   var option1 = $("<option value=\"1\">text1</option>").appendTo(select);//在下拉框里面创建option并添加
7、加载函数
   window.onload=function(){
   }
   $(function(){
   })

引用

总结:
      1、js的dom一般都是以document开头
      2、js的bom一般都是以window开头
      3、jquery一般都是以$("")开头,方法都是有括号的 比如获取值val()等等,细节参看以上描述
  注意事项:
      1、一句完整的代码不能出现jquery和js混搭,比如获取对象的值document.getElementById("tex1").val(); 是不对的,
      分析:document.getElementById("tex1")是js写法,val()是jquery的方法
      2、但是一个方法里面可以出现js和jquery混用,比如  一个登陆页面
      function doTest(){
                var username=document.getElementById("username").value;//该写法是js写法获取用户名
                var pwd=$("#tex1").val();//该写法是jquery写法获取密码
                if(""==username){
                alert("用户名不能为空");
                return;
                    } ;
      };
      3、代码一定要写规范,分号该加就加,严格要求自己,增加领导认可程度,方便自己以及其他人,避免不必要的bug
      4、方法名变量名一定要有意义
      5、不要使用中文定义文件名


分享到:
评论

相关推荐

    js&jquery;学习笔记

    2. **DOM操作对比**:比较JavaScript原生DOM操作和jQuery的差异与优势。 3. **事件处理**:如何使用JavaScript和jQuery处理用户交互事件。 4. **动画与过渡**:介绍如何使用jQuery创建平滑的动画和过渡效果。 5. **...

    Bootstrap&jQuery项目实战:电商网站

    3. **事件处理**:jQuery提供了一致的事件处理方式,可以方便地监听用户的点击、滚动等行为,实现个性化功能,如添加到购物车、商品对比等。 在实际项目中,我们可能会遇到以下关键步骤: 1. **初始化Bootstrap**...

    JQuery 产品对比功能

    本项目重点在于利用jQuery和Cookie技术实现一个商品对比功能,以便用户可以方便地比较不同产品的特性。以下是这个功能涉及的关键知识点: 1. jQuery库:jQuery是JavaScript的一个轻量级框架,提供了丰富的API来处理...

    jquery对比功能

    1. **选择器**:jQuery的选择器是其对比传统JavaScript的一大亮点。jQuery支持CSS1到CSS3的选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`选取所有class为指定类名的元素,`$("tag")`选取所有特定...

    jQuery对比图片放大镜查看代码.zip

    jQuery对比图片放大镜功能基于JavaScript库jQuery,通过监听鼠标移动事件,动态改变图片的大小和位置,模拟出放大镜的效果。主要分为两个部分:原始图片和放大镜区域。当鼠标在原始图片上移动时,放大镜区域会显示...

    jQuery选择图片对比代码

    【jQuery选择图片对比代码】是一种基于JavaScript库jQuery实现的交互式图片处理功能,它提供了丰富的用户体验,让用户可以方便地比较两张图片的差异。这个代码主要适用于网页设计、产品展示、图像编辑等领域,允许...

    JavaScript框架jQuery和ExtJS的对比研究.pdf

    "JavaScript框架jQuery和ExtJS的对比研究" 本文将对JavaScript框架jQuery和ExtJS进行对比研究,旨在帮助Web开发者选择合适的JavaScript框架。 JavaScript框架的重要性 随着Web 2.0时代的到来,Web应用程序越来越...

    JS商品对比页

    "JS商品对比页"这个项目显然就是利用JavaScript技术来实现这样一个功能,提供用户友好的交互体验,同时防止页面不必要的刷新,以优化性能。接下来,我们将深入探讨JavaScript在商品对比页面中的应用以及相关知识点。...

    精通js脚本之jquery框架

    **与现代JavaScript框架的对比** 虽然现代前端框架如React、Vue和Angular提供了更强大的状态管理和组件化功能,jQuery在某些场景下依然有其优势。对于简单的交互和快速原型开发,jQuery的轻量级和易用性仍然具有...

    jquery经典示例,jquery与javascript对比

    这个压缩包文件中的内容很可能是关于jQuery的一些经典示例,以及将jQuery与原生JavaScript进行对比的讲解。让我们深入探讨一下jQuery和JavaScript之间的差异,以及jQuery的一些核心特点和经典应用。 首先,jQuery的...

    javascript&amp;amp;jquery方法比对.docx

    ### JavaScript与jQuery方法对比 #### 一、简介 在前端开发领域,JavaScript 是一种核心的编程语言,而 jQuery 是基于 JavaScript 的一个库,它简化了许多常见的任务,如选择元素、处理事件、创建动画等。本文将...

    jQuery二张图片滑动对比效果代码 .rar

    【jQuery二张图片滑动对比效果代码】是一种常见的网页交互设计,它利用JavaScript库jQuery实现了一种动态展示两张图片差异的特效。用户可以通过平移一个滑块,左右对比两张图片,这种效果常用于产品展示、前后对比...

    JavaScript与JQuery实现全选例子

    在本文中,我们将深入探讨如何使用JavaScript和jQuery来实现全选功能,并且会详细解析全选、反选以及单个选择等操作的具体实现方法。同时,我们也会对比这两种技术实现方式的不同之处及其适用场景。 ### 一、...

    jquery_js 对比计算器习作

    **jQuery JS 对比计算器习作详解** 在网页开发中,JavaScript 是一种不可或缺的脚本语言,它赋予了网页动态交互的能力。而 jQuery 是一个基于 JavaScript 的库,它简化了 JavaScript 的许多操作,使得开发者能够更...

    浅谈JavaScript 库———jQuery, ExtJs 的对比研究

    ### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...

    精通JavaScript.jQuery.rar

    讲解的重点在于简化JavaScript的开发步骤,注重实例之间的对比与递进,充分展示jQuery所带来的革新。书中最后给出4个综合实例,让读者进一步巩固所学知识,提高综合应用的能力。  《精通JavaScript+jQuery(1CD)》...

    可拖动对比图片jQuery焦点图.zip

    【可拖动对比图片jQuery焦点图】是一种基于JavaScript库jQuery实现的交互式图像展示插件,主要用于比较两张图片的不同之处。这种焦点图插件的独特之处在于它提供了动态的、可拖动的分割条,用户可以通过左右移动这个...

    jQuery原始图片对比插件

    **jQuery原始图片对比插件详解** 在Web开发中,展示图片对比效果是常见的需求,比如在产品展示、图像处理效果预览等场景。jQuery作为一款轻量级的JavaScript库,因其简洁的API和丰富的插件生态,使得实现这样的功能...

    JQuery框架 JS框架 JS javascript

    3. **JQuery与其他JS框架的对比** - **AngularJS**:侧重于MVVM(Model-View-ViewModel)架构,适合大型单页应用,而JQuery更适合快速原型开发和小型项目。 - **ReactJS**:Facebook推出的库,重点在于组件化,...

    jQuery-1.6.2.js+jQuery-1.4.2.js +笔记

    总之,jQuery 1.6.2.js和jQuery 1.4.2.js是JavaScript开发中的重要工具,它们为我们提供了丰富的功能和高效的代码编写方式。深入学习这两个版本,理解其源码和应用场景,将对提升前端开发技能大有裨益。同时,不断...

Global site tag (gtag.js) - Google Analytics