通过过一下对比，我们能很清楚的发现jquery与js的区别，运用jquery能大量减少代码量，不过js里面关于时间的setinterval和settimeout只能用js

<script src="jquery-1.11.2.min.js"></script>；

引用文件的语句一定要放在最前面，即使写了新的js方法和引用的js文件，也要把Jquery文件的引用语句放在最前面。下面就说一下Jquery和js的区别：

1.找元素（两种方法一一对应）：

js方法：

var  a  = document.getElementById("id名");

var  a  = document.getElementsByClassName("class名");

document.getElementsByTagName("标签名");

var  a  = document.getElementsByName("name名");

Jquery方法：

var a = $("#id名");

var a = $(".class名");

var a = $("标签名");

var a = $("[属性名=属性值]");

最后一个方法非常方便，很实用，我们可以看到Jquery方法的代码量少了很多，也很方便。

2.操作内容：

js方法：

（1）.非表单元素：

alert(a.innerText); 获取文本

alert(a.innerHTML);HTML代码

（2）.表单元素：

alert(a.value);

a.value="hello";

Jquery方法：

（1）.非表单元素：

alert(a.text());

a.text("bbbbb");

alert(a.html());

（2）.表单元素：

a.val("hello");

3.操作属性：

js方法：

a.setAttribute("属性名","属性值");   添加属性

a.removeAttribute("属性名");        删除属性

alert(a.getAttribute("属性名"));     获取属性

Jquery方法：

a.attr("属性名","属性值");             添加属性

a.removeAttr("属性名");              删除属性

alert(a.attr("属性名"));                获取属性

或者别的方法：

a.prop("属性名","属性值");            添加属性

a.removeProp("属性名");             删除属性

alert(a.prop("属性名"));               获取属性

a.prop("checked",true);

alert(a.prop("checked"));            选择点击事件

4.操作样式：

js方法：

a.style.样式名="样式格式";

alert(a.style.样式名);

Jquery方法：

a.css("样式名","样式格式");

alert(a.css("样式名"));

5.统一操作样式：

js方法：

var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}

Jquery方法：

$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);

这里就可以看出Jquery方法的简便；

小测试，上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aa{ width:200px; height:200px; float:left; background-color:green; margin:2px;}

</style>

</head>

<body>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

</body>

<script type="text/javascript">

$(".aa").click(function(){

    $(".aa").css("background-color","green");

    $(this).css("background-color","red");

    })

</script>

</html>

　　测试内容：建立多个div，在点击时，被点击的div变色，如果点击另一个，原本变色的变成原色，效果如下：

点击一个后会变成的样子：

最后只有被点击的div才会变色

jQuery与js的区别，并有基本语法详解，的更多相关文章

  1. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  2. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  3. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  4. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  5. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

  6. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  7. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  8. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  9. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

随机推荐

  1. 转载 - JSONObject简介

    出处: http://www.cnblogs.com/java-pan/archive/2012/04/07/JSONObject.html JSONObject简介   本节摘要:之前对JSON做了 ...

  2. ECMAScript 6 入门学习笔记（零）——开始

    所有es6笔记都是我自己提出来的一些点,没有很详细的例子什么的,这个链接就是我看的教程,有需要的可以看看.(http://es6.ruanyifeng.com/#docs/intro) 1.ECMAS ...

  3. 【Python】Python 标准库 urllib2 的使用细节

    转自:http://zhuoqiang.me/python-urllib2-usage.html http://www.cnblogs.com/txw1958/archive/2012/03/12/2 ...

  4. QQ加群组件-iPhone、Android、网页上加入QQ群

    iPhone代码: - (BOOL)joinGroup:(NSString *)groupUin key:(NSString *)key{ NSString *urlStr = [NSString s ...

  5. 新博客有了，文章转移到 http://www.iosxxx.com/

    文章转移到 http://www.iosxxx.com/ ,敬请大家关注

  6. [dfs] UVALive 3667 Ruler

    题目链接: option=com_onlinejudge&Itemid=8&page=show_problem&problem=1668">https://ic ...

  7. inline-block元素因基线对齐而造成上浮的问题

    假设我需要实现将三个块级元素并排对齐的如下效果: 代码如下: <!DOCTYPE html> <html lang="en-US"> <head> ...

  8. Redis缓存数据库安全加固指导（一）

    背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...

  9. Levenberg–Marquardt algorithm

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFubWVuZ3dlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  10. WCF Odata 开放数据协议应用

    OData简介 说起 WCF Data Service ,不得不说的是 OData.对于一个标准的 Web 服务,它往往会提供了一些功能,比如说:订货.退货这些,然后使用者通过HTTP协议来使用这些功 ...