备用
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、不要使用中文定义文件名
分享到:
相关推荐
2. **DOM操作对比**:比较JavaScript原生DOM操作和jQuery的差异与优势。 3. **事件处理**:如何使用JavaScript和jQuery处理用户交互事件。 4. **动画与过渡**:介绍如何使用jQuery创建平滑的动画和过渡效果。 5. **...
3. **事件处理**:jQuery提供了一致的事件处理方式,可以方便地监听用户的点击、滚动等行为,实现个性化功能,如添加到购物车、商品对比等。 在实际项目中,我们可能会遇到以下关键步骤: 1. **初始化Bootstrap**...
本项目重点在于利用jQuery和Cookie技术实现一个商品对比功能,以便用户可以方便地比较不同产品的特性。以下是这个功能涉及的关键知识点: 1. jQuery库:jQuery是JavaScript的一个轻量级框架,提供了丰富的API来处理...
1. **选择器**:jQuery的选择器是其对比传统JavaScript的一大亮点。jQuery支持CSS1到CSS3的选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`选取所有class为指定类名的元素,`$("tag")`选取所有特定...
jQuery对比图片放大镜功能基于JavaScript库jQuery,通过监听鼠标移动事件,动态改变图片的大小和位置,模拟出放大镜的效果。主要分为两个部分:原始图片和放大镜区域。当鼠标在原始图片上移动时,放大镜区域会显示...
【jQuery选择图片对比代码】是一种基于JavaScript库jQuery实现的交互式图片处理功能,它提供了丰富的用户体验,让用户可以方便地比较两张图片的差异。这个代码主要适用于网页设计、产品展示、图像编辑等领域,允许...
"JavaScript框架jQuery和ExtJS的对比研究" 本文将对JavaScript框架jQuery和ExtJS进行对比研究,旨在帮助Web开发者选择合适的JavaScript框架。 JavaScript框架的重要性 随着Web 2.0时代的到来,Web应用程序越来越...
"JS商品对比页"这个项目显然就是利用JavaScript技术来实现这样一个功能,提供用户友好的交互体验,同时防止页面不必要的刷新,以优化性能。接下来,我们将深入探讨JavaScript在商品对比页面中的应用以及相关知识点。...
**与现代JavaScript框架的对比** 虽然现代前端框架如React、Vue和Angular提供了更强大的状态管理和组件化功能,jQuery在某些场景下依然有其优势。对于简单的交互和快速原型开发,jQuery的轻量级和易用性仍然具有...
这个压缩包文件中的内容很可能是关于jQuery的一些经典示例,以及将jQuery与原生JavaScript进行对比的讲解。让我们深入探讨一下jQuery和JavaScript之间的差异,以及jQuery的一些核心特点和经典应用。 首先,jQuery的...
### JavaScript与jQuery方法对比 #### 一、简介 在前端开发领域,JavaScript 是一种核心的编程语言,而 jQuery 是基于 JavaScript 的一个库,它简化了许多常见的任务,如选择元素、处理事件、创建动画等。本文将...
【jQuery二张图片滑动对比效果代码】是一种常见的网页交互设计,它利用JavaScript库jQuery实现了一种动态展示两张图片差异的特效。用户可以通过平移一个滑块,左右对比两张图片,这种效果常用于产品展示、前后对比...
在本文中,我们将深入探讨如何使用JavaScript和jQuery来实现全选功能,并且会详细解析全选、反选以及单个选择等操作的具体实现方法。同时,我们也会对比这两种技术实现方式的不同之处及其适用场景。 ### 一、...
**jQuery JS 对比计算器习作详解** 在网页开发中,JavaScript 是一种不可或缺的脚本语言,它赋予了网页动态交互的能力。而 jQuery 是一个基于 JavaScript 的库,它简化了 JavaScript 的许多操作,使得开发者能够更...
### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...
讲解的重点在于简化JavaScript的开发步骤,注重实例之间的对比与递进,充分展示jQuery所带来的革新。书中最后给出4个综合实例,让读者进一步巩固所学知识,提高综合应用的能力。 《精通JavaScript+jQuery(1CD)》...
1. **引入jQuery**:可以将jQuery库通过CDN链接或者本地文件引入,如`<script src="jquery-3.4.1.min.js"></script>`。 2. **选择器与遍历**:通过选择器选取元素后,可使用`.each()`遍历,如`$('div').each...
【可拖动对比图片jQuery焦点图】是一种基于JavaScript库jQuery实现的交互式图像展示插件,主要用于比较两张图片的不同之处。这种焦点图插件的独特之处在于它提供了动态的、可拖动的分割条,用户可以通过左右移动这个...
**jQuery原始图片对比插件详解** 在Web开发中,展示图片对比效果是常见的需求,比如在产品展示、图像处理效果预览等场景。jQuery作为一款轻量级的JavaScript库,因其简洁的API和丰富的插件生态,使得实现这样的功能...
3. **JQuery与其他JS框架的对比** - **AngularJS**:侧重于MVVM(Model-View-ViewModel)架构,适合大型单页应用,而JQuery更适合快速原型开发和小型项目。 - **ReactJS**:Facebook推出的库,重点在于组件化,...