js与jquery异同
大家都知道jquery是js的一个库,很多东西大多数简写了,让js写起来特别的方便。但是对与学习的人来说,最好是先学会了js再去学jquery会更好。在学得过程中你会发现两者实现的原理是差不多的,但是写法上是有很多区别的。下面是个人的一些简单的积累,来区分二者的写法。
1.起步
如果要用jquery的时候需要去引用jquery库的js。你可以下载到本地,或者是用cdn的js也可以。
2.选择器
| 选择方式/js/jquery |
js |
jquery |
| 选择id | document.getElementById("id"); | $("#id"); |
| 选择name | document.getElementsByName("name"); | $("input[name='keleyicom']") |
| 选择类名 | document.getElementsByClassName("classname"); | $(".classname"); |
| 选择标签 | document.getElementsByTagName("tagname"); | $("tagname"); |
3.操作html
document.getElementById("id").innerHTML; $("#id").html();
document.getElementById("id").innerText; $("#id").text();
document.getElementById("id").value; $("#id").val();
赋值的时候:$("#id").val("xxx");
4.增加和删除标签
jquery:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
js:
var para=document.createElement("p");//增加
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1"); //删除
var child=document.getElementById("p1");
parent.removeChild(child);
5.遍历
js与jquery异同的更多相关文章
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- label用js,jquery取值赋值,以及怎么在后台取值
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
- JS与Jquery区别
很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- js+html+jquery 个人笔记
js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
随机推荐
- September 30th 2016 Week 40th Friday
Elegance is the only beauty that never fades. 优雅是唯一不会褪色的美. Even the most beautiful apperance may los ...
- 模拟赛1102d2
/* φ(n)=φ(p^k)=p^k-p^(k-1)=(p-1)*p^(k-1) φ(m*n)=φ(m)*φ(n) 直接套公式做,因为分解质因数时,只分解一个数,所以可以不打素数表,只将n分解到√n就 ...
- iOS 简单提示view
+(void)showMessage:(NSString *)message{ UIWindow * window = [UIApplication sharedApplication].key ...
- iOS - UIButton设置图片文字上图下文排列
经查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下: @interface UIButton (UIButton ...
- postgres与osm初步使用
layout: post title: postgres与osm初步使用 date: 2016-9-20 categories: blog tags: [地图开发] description:地图开发 ...
- C#回顾 - 2.NET的IO:Path、File、FileInfo、Directory、DirectoryInfo、DriveInfo、FileSystemWatcher
1.管理文件系统 一般而言,应用程序都会有保存数据.检索数据的需求. 1.1 使用 path 类来访问文件路径 [path常用的方法]:http://www.cnblogs.com/tangg ...
- VS使用技巧(转)
转自http://www.cnblogs.com/xpvincent/p/3596553.html i. Ctrl-M-O 折叠所有方法 ii. Ctrl-M-P 展开所有方法并停止大纲显示(不可以再 ...
- centos安装oracle 11g 完全图解
摘要: 说明: Linux服务器操作系统:CentOS 5.8 32位(注意:系统安装时请单独分区/data用来安装oracle数据库) Linux服务器IP地址:192.168.21.150 Ora ...
- 图结构练习——判断给定图是否存在合法拓扑序列(dfs算法(第一个代码),邻接矩阵(前两个代码),邻接表(第三个代码))
sdut 2140 图结构练习——判断给定图是否存在合法拓扑序列 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 给定一个有向图 ...
- ZooKeeper 的羊群效应
一个需要避免的问题是当一个特定的znode 改变的时候ZooKeper 触发了所有watches 的事件. 举个例子,如果有1000个客户端watch 一个znode的exists调用,当这个节点被创 ...