jQuery与js的区别,并有基本语法详解,
通过过一下对比,我们能很清楚的发现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的区别,并有基本语法详解,的更多相关文章
- JQUERY与JS的区别
JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...
- jQuery于js的区别和联系
一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- js正则实现二代身份证号码验证详解
js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- js keyup、keypress和keydown事件 详解
js keyup.keypress和keydown事件 详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
随机推荐
- codevs3410 别墅房间
题目描述 Description 小浣熊松松到他的朋友家别墅去玩,发现他朋友的家非常大,而且布局很奇怪.具体来说,朋友家的别墅可以被看做一个N*M的矩形,有墙壁的地方被标记为’#’,其他地方被标记为’ ...
- Mysql修改自增主键的起始值及查询自增主键的下一个值
MySQL [xxx_mall]> alter table shop_base_info AUTO_INCREMENT=11000;Query OK, 0 rows affected (0.0 ...
- Android 属性动画(Property Animation) 全然解析 (上)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475 1.概述 Android提供了几种动画类型:View Animat ...
- python集合可以进行相减
python集合可以进行相减 student = {'tom','jim','mary','tom','jack','rose'} print(student) print('rose' in stu ...
- PhoneGap3+版本号的安装、配置和使用[图]
如若转载.请注明博文地址及原作者(RisingWonderland). PhoneGap2+版本号最高为2.9.1,从3+版本号開始,PhoneGap官方不再提供下载安装包,须要在联网状态下.通过No ...
- HDU 1421 搬寝室 (线性dp 贪心预处理)
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- zoj3605 Find the Marble --- 概率dp
n个杯子.球最開始在s位置.有m次换球操作,看到了k次,看的人依据自己看到的k次猜球终于在哪个位置,输出可能性最大的位置. dp[m][k][s]表示前m次操作中看到了k次球终于在s的频率. #inc ...
- tomcat的localhost_access_log日志文件
一.服务器打印日志要关闭hibernate的日志,首先要把hibernate.show_sql设置为false;然后设置log4j.properties. # Control logging for ...
- _stdcall与_cdecl
_cdecl(C Declaration的缩写)是C/C++和MFC程序默认使用的调用约定,因此可以省略,也可以在函数声明时加上_cdecl关键字来手工指定.采用_cdecl约定时,函数参数按照从右到 ...
- MapReduce02
====================== MapReduce实现 ====================== Input: 一系列key/value对 用户提供两个函数实现: map(k,v) ...