大家都知道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. SQL基本CRUD

    --已知Oracle的Scott用户中提供了三个测试数据库表 --名称分别为dept,emp,salgrade.使用SQL语言完成一下操作 --1,查询20号部门的所有员工信息: SELECT * F ...

  2. SQLServer 批量插入数据的两种方法

    SQLServer 批量插入数据的两种方法-发布:dxy 字体:[增加 减小] 类型:转载 在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Ins ...

  3. PCH文件配置路径

    "项目" >> Build  Settings >> Preflx Header >> $(SRCROOT)/项目名/XXX.pch

  4. Linear regression with multiple variables(多特征的线型回归)算法实例_梯度下降解法(Gradient DesentMulti)以及正规方程解法(Normal Equation)

    ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, , ...

  5. 对于大一学习计算机的新手(c/c++ )提出一些学习经验

    对于刚刚上大一的新手,且是那种十分有上进的学生,在学习计算机的过程中必然会有一大堆的困惑,比如: 1 .如何学好编程(这与以往的应试教育完全不同,按照以往的那种学习方式,看书刷题不过是成为一个考试学霸 ...

  6. python基础——sorted()函数

    python基础——sorted()函数 排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个d ...

  7. Android-----overridePendingTransition的使用

    1 Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时 ...

  8. NYOJ题目11613n+1问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAIvCAIAAAAXg+GWAAAgAElEQVR4nO3dO1LryNsH4G8T5CyE2A ...

  9. 【PHP&&MySQL详解】

    PHP和MySQL是一对好搭档,PHP中有一个很大的扩展库专门针对对MySQL的操作.当然,作为一个PHP程序员,首先对MySQL的增删查改要非常熟悉才行. MySQL数据库的连接数大概在6w个左右, ...

  10. [LeetCode] Happy Number

    Happy Number Total Accepted: 35195 Total Submissions: 106936 Difficulty: Easy Write an algorithm to ...