JQUERY与JS的区别
JQUERY与JS的区别
<style type="text/css">
#aa
{
width:200px;
height:200px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" style="">hello</div>
<div class="bb"></div>
<div class="bb"></div>
<div class="bb"></div>
<input type="text" name="cc" bs="dd" />
</body>
<script type="text/javascript">
JS:
//根据ID找元素,找到具体的DOM对象
var d = document.getElementById("aa");
var c = document.getElementsByClassName("bb");
var div = document.getElementsByTagName("div");
var input = document.getElementsByName("cc"); //操作内容
//1.非表单元素
d.innerHTML; d.innerTEXT;
//2.表单元素
d.value; //操作属性
d.setAttribute("bs","pp"); //添加属性
d.getAttribute("bs");//获取属性
d.removeAttribute("bs");//移除属性 //操作样式
//d.style.color = "red";
//d.style.backgroundColor = "yellow";
//alert(d.style.width);
JQUERY:
$(document).ready(function(e) { //根据ID找元素,找出的JQUERY对象,如果要取DOM对象,取索引0的元素
var jd = $("#aa"); //根据ID
var jc = $(".bb"); //根据Class
var di = $("div"); //根据标签名
var ip = $("input[bs=dd]");//根据属性筛选 for(var i=;i<jc.length;i++)
{
jc.eq(i); //取数组里面的第几个JQUERY对象
} //操作内容
//1.非表单元素
jd.text(); jd.text("aa");
jd.html(); jd.html("vv");
//2.表单元素
jd.val(); //属性操作
jd.attr("bs","aa");//设置属性
jd.attr("bs"); //获取属性
jd.removeAttr("bs");//移除属性 //操作样式
jd.css("background-color","green");
//alert(jd.css("width")); //给一个元素加事件
/*$("#aa").click(function(){ alert("aa"); })*/
//给多个元素加事件
/*$(".bb").click(function(){ alert($(this).text()); })*/ //给多个元素设置相同样式(属性)
//$(".bb").css("color","pink"); }); </script>
例:
<body> <input type="checkbox" id="all" /> 全选<br />
<input class="t" type="checkbox" value="aa" /> aa
<input class="t" type="checkbox" value="bb" /> bb
<input class="t" type="checkbox" value="cc" /> cc
<input class="t" type="checkbox" value="dd" /> dd
<input class="t" type="checkbox" value="ee" /> ee <input type="button" value="测试" id="btn" />
<input type="text" id="txt" />
<input type="button" value="设置选中" id="sel" /> </body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript"> $(document).ready(function(e) { //全选
$("#all").click(function(){ var ck = $(".t");
var xz = $(this)[0].checked; ck.prop("checked",xz); }) //取选中项的值
$("#btn").click(function(){ var ck = $(".t");
for(var i=0; i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
{
alert(ck.eq(i).val());
}
} }) //设置某项选中
$("#sel").click(function(){ var v = $("#txt").val(); var ck = $(".t");
ck.prop("checked",false);
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==v)
{
ck.eq(i).prop("checked",true);
}
}
})
}); </script>
JQUERY与JS的区别的更多相关文章
- jQuery与js的区别,并有基本语法详解,
通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...
- jQuery于js的区别和联系
一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jquery.js和jquery.min.js的区别介绍
1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...
- jquery.js和jquery.min.js的区别和springboot整合echarts.min.js
1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...
- jQuery与JS的区别,以及jQuery的基础语法
*在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...
- jquery与js的区别与基础操作
一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
- Jquery和JS的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery与js具体使用的区别(不全,初学)
jQuery能大大简化Javascript程序的编写 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javasc ...
随机推荐
- 三门概率问题之C#版
前言: 早上看到一片关于三门问题的博客http://www.cnblogs.com/twocats/p/3440398.html,抱着该博客结论的怀疑态度用C#语言写了一些代码.实验证明该博客的结论是 ...
- .NET Framework 4.5、4.5.1 和 4.5.2 中的新增功能
.NET Framework 4.5.4.5.1 和 4.5.2 中的新增功能 https://msdn.microsoft.com/zh-cn/library/ms171868.aspx
- eclipse中设置中文javadoc+如何查看class的中文javadoc
一. eclipse中设置中文javadoc 1.先到http://download.java.net/jdk/jdk-api-localizations/jdk-api-zh-cn/publish ...
- SQL Server 锁表说明
锁定数据库的一个表 SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 SELECT * FROM table WITH (HOLDLOCK) 其 ...
- IP分片浅析
在TCP/IP分层中,数据链路层用MTU(Maximum Transmission Unit,最大传输单元)来限制所能传输的数据包大小,MTU是指一次传送的数据最大长度,不包括数据链路层数据帧的帧头, ...
- Javacript中(function(){})() 与 (function(){}()) 区别 {转}
这个问题可以从不同的角度来看,但从结果上来说 :他们是一样的.首先,如果从AST(抽象语法树)的角度来看,两者的AST是一模一样的,最终结果都是一次函数调用.因此,就解析器产生的结果论而言,两者是没有 ...
- Unity3D判断鼠标向右或向左滑动,响应不同的事件
private var first = Vector2.zero; private var second = Vector2.zero; function Update () { } function ...
- 总结 | 如何测试你自己的 RubyGem
如何测试一个Gem gem 开发完了,想要给别人用,那就需要测试啊,测试一个 gem 其实很简单,这里我们用 minitest 为例, rspec 也一样适用.先来看看我们当前这个 gem 的目录结构 ...
- 分布式数据存储 - MySQL双主复制
上篇文章<分布式数据存储 - MySQL主从复制>,我们说到MySQL主从复制很好的保障了从库,读的高可用性.so,问题来了: 1.针对主库,写的高可用性又是如何做到高可用性? 2.如果需 ...
- 【hadoop】有参考价值的博客整理
好文章的网址: hadoop shuffle机制中针对中间数据的排序过程详解(源代码级) Hadoop mapreduce原理学习 与 Hadoop 对比,如何看待 Spark 技术? 深入理解Had ...