通过过一下对比，我们能很清楚的发现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. Elasticsearch使用总结

    原文出自:https://www.2cto.com/database/201612/580142.html ELK干货:http://www.cnblogs.com/xing901022/p/4704 ...

  2. 做ssh框架整合的时候，遇到如下错误：AnnotationTransactionAttributeSource is only available on Java 1.5 and higher

    nested exception is java.lang.IllegalStateException: AnnotationTransactionAttributeSource is only av ...

  3. hdu3303

    分析:一个最暴力的想法是把加入到集合S的数据一个个按顺序保存起来,然后每次查询的时候由后向前计算余数,如果遇到余数为0的,就直接把时间输出,否则就一直比较到最后找余数最小时间最晚的,这样查询的时间复杂 ...

  4. NOIP2015 提高组合集

    NOIP 2015 提高组 合集 D1 T1 神奇的幻方 题目让你干啥你就干啥,让你咋走你就咋走就完事儿了 #include <iostream> #include <cstdio& ...

  5. html缓存机制，http头部控制

    1.缓存分类:服务器缓存(协商缓存),第三方缓存,浏览器缓存(强制缓存) 2.浏览器缓存(添加 meta),设置请求指定的http头部信息.(状态码200,from cache , from dist ...

  6. COCOS学习笔记--变速动作Speed和ActionEase

    变速动作和复合动作类似.也是一种特殊的动作,它能够把不论什么动作依照改变后的速度运行.变速动作与复合动作最大的差别就是复合动作仅仅是单纯的组合一系列动作,而变速的做在组合一系列动作后还要去改变动作的运 ...

  7. 玩转iOS开发 - 视图控制器生命周期

    视图控制器生命周期

  8. CentOS7安装MariaDB成功的实践

    前言 在自己的VPS的CentOS7安装Oracle的Mysql失败以后,我又开始找CentOS7上面安装MariaDB的方法,于是我找打了这篇文章:http://blog.csdn.net/defa ...

  9. 一分钟让你了解Microsoft Edge

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  10. codeforces 939E Maximize! 双指针（two pointers）

    E. Maximize! time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...