通过过一下对比，我们能很清楚的发现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. 【Eclipse】Eclipse 快捷键

    Eclipse 快捷键 关于快捷键 Eclipse 的很多操作都提供了快捷键功能,我们可以通过键盘就能很好的控制 Eclipse 各个功能: 使用快捷键关联菜单或菜单项 使用快捷键关联对话窗口或视图或 ...

  2. ISO 7064:1983.MOD11-2校验码计算法 : (身份证校验码-18位)

    /* 假设某一17位数字是 17位数字 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 加权因子 7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 计算17位 ...

  3. PHP rand()和mt_rand()的区别

    rand()和mt_rand()作用都是产生一个随机整数,都有两种使用形式: 1.int rand(void) / int mt_rand(void) 2.int rand(int $min, int ...

  4. 洛谷—— P1725 琪露诺

    https://www.luogu.org/problem/show?pid=1725 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精.某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这 ...

  5. T1081 线段树练习 2 codevs

    http://codevs.cn/problem/1081/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题目描述 Description 给你N个数, ...

  6. Spring Boot配置文件规则以及使用方法官方文档查找以及Spring项目的官方文档查找方法

    比如要使用Spring Boot实现一个功能,最直接的方式是Google,但是往往搜索出来的都比较乱,关键是乱在不同的版本上,比如1.x版本和2.x版本的配置是不一样的.最明显区别是在使用Thymel ...

  7. 20、Java并发性和多线程-Slipped Conditions

    以下内容转自http://ifeve.com/slipped-conditions/: 所谓Slipped conditions,就是说, 从一个线程检查某一特定条件到该线程操作此条件期间,这个条件已 ...

  8. 墨卡托坐标与LBS应用

    今天了解到这边的LBS应用,一般用的是墨卡托坐标. 也就是商品库的商品入库的时候,会根据输入,使用百度地图提供的一个API,来转换成一个墨卡托坐标. 然后用户流量过来的时候,会带来历史坐标,和当前坐标 ...

  9. 可恢复的安全rm

    我们常常使用rm去删除一些文件.假设不小手一抖,那么就悲剧了.你们都懂的... 在经历过一次这种慘剧后.决定永远杜绝这种情况.重写写了shell函数.运行安全的rm.这个函数会把要删除的文件按日期备份 ...

  10. 22、Cocos2dx 3.0游戏开发找小三之音乐与音效：假如世界上没有了音乐，你的耳朵会孤单吗？

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30485103 假如世界上没有了音乐,在森林里.我们听 ...