大家都知道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异同的更多相关文章

  1. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  2. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  3. label用js,jquery取值赋值,以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  4. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  5. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  6. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. js+html+jquery 个人笔记

    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

  9. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

随机推荐

  1. Ajax与Jquery题库

    一.    填空题 1.在JQuery中被誉为工厂函数的是 $() . 2.在jQuery中需要选取<div>元素里所有<a>元素的选择器是 $("div a&quo ...

  2. Mysql相关集锦

    1.MyBatis中设置或获取插入的自增主键 http://my.oschina.net/kolbe/blog/512904 2.MySql性能调优与架构设计系列 http://www.cnblogs ...

  3. 继承下public,protected,private访问权限

    C++中派生类对基类成员的访问形式主要有以下两种: 1.内部访问:由派生类中新增成员对基类继承来的成员的访问. 2.对象访问:在派生类外部,通过派生类的对象对从基类继承来的成员的访问.今天给大家介绍在 ...

  4. NYOJ题目1047欧几里得

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAIcCAIAAACLpKQmAAAgAElEQVR4nO3dv1LjOsMH4O8m6LkQ6l ...

  5. Loadrunner连接Mysql数据库

    1.库文件下载地址:http://files.cnblogs.com/files/xiaoxitest/MySQL_LoadRunner_libraries.zip 分别添加到Loadrunner b ...

  6. Python中带参装饰器理解

  7. php 分页

    分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private ...

  8. volatile关键字与线程间通信

    >>Java内存模型 现在计算机普遍使用多处理器进行运算,并且为了解决计算机存储设备和处理器的运算速度之间巨大的差距,引入了高速缓存作为缓冲,缓存虽然能极大的提高性能,但是随之带来的缓存一 ...

  9. SQL exists( select 1 from

    use UnlockIndustry select * from Info_Coordinate as A join Info_Employee on A.EmployeeId=Info_Employ ...

  10. PostgreSQL的时间/日期函数使用

    PostgreSQL的常用时间函数使用整理如下: 一.获取系统时间函数 1.1 获取当前完整时间 select now(); david=# select now(); now ----------- ...