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的区别的更多相关文章
	

    
								
  1. jQuery与js的区别，并有基本语法详解，
		
    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...
    
		
    2. 
						
  2. jQuery于js的区别和联系
		
    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...
    
		
    3. 
						
  3. jquery和Js的区别和基础操作
		
    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
    
		
    4. 
						
  4. jquery.js和jquery.min.js的区别介绍
		
    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...
    
		
    5. 
						
  5. jquery.js和jquery.min.js的区别和springboot整合echarts.min.js
		
    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...
    
		
    6. 
						
  6. jQuery与JS的区别，以及jQuery的基础语法
		
    *在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...
    
		
    7. 
						
  7. jquery与js的区别与基础操作
		
    一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
    
		
    8. 
						
  8. Jquery和JS的区别
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    9. 
						
  9. JQuery与js具体使用的区别（不全，初学）
		
    jQuery能大大简化Javascript程序的编写 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javasc ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mongo的insert和save比较
			
    insert仅仅是插入文档到集合中,如果记录不存在则插入,如果记录存在则忽略 save是在文档不存在时插入,存在时则是更新 下面代码不是为了演示insert和save的: foreach ($mens ...
    
			
    2. 
						
  2. 【BZOJ】【3850】ZCC Loves Codefires
			
    贪心 就跟NOIP2012国王游戏差不多,考虑交换相邻两题的位置,对其他题是毫无影响的,然后看两题顺序先后哪个更优.sort即可. WA了一次的原因:虽然ans开的是long long,但是在这一句: ...
    
			
    3. 
						
  3. 关于面向对象--oop
			
    这两天在做大数据方面的项目看到关于job作业调度的设计,扣了两天了,感触良多,记下来做个反省. 这是一个精简版的图,其中还有一些没有划到,其实到这里目前对我来说已经足够了. 看完图之后进行分析,我只抛 ...
    
			
    4. 
						
  4. Mac下配置Maven
			
    1.Java环境变量设置就不说. 但是配置Maven需要检查下Java环境变量的设置.需要检查JAVA_HOME环境变量以及Java命令 wanyakundeMacBook-Pro:Library w ...
    
			
    5. 
						
  5. Codeforces446C DZY Loves Fibonacci Numbers(线段树 or 分块？)
			
    第一次看到段更斐波那契数列的,整个人都不会好了.事后看了题解才明白了一些. 首先利用二次剩余的知识,以及一些数列递推式子有下面的 至于怎么解出x^2==5(mod 10^9+9),我就不知道了,但是要 ...
    
			
    6. 
						
  6. 在C#中读写INI配置文件(转)
			
    在作应用系统开发时,管理配置是必不可少的.例如数据库服务器的配置.安装和更新配置等等.由于Xml的兴起,现在的配置文件大都是以xml文档来存储.比如Visual Studio.Net自身的配置文件Ma ...
    
			
    7. 
						
  7. [转载] ACE 组播校验和出错问题解决
			
    源地址:http://yuanmuqiuyu2000.blog.sohu.com/140904942.html 使用ACE框架写了个组播简单的测试工具,但是测试过程中,总是发现udp校验和出错的信息. ...
    
			
    8. 
						
  8. linux read命令详解
			
    read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read(选项)(参数) 选项 -p:指定读取值 ...
    
			
    9. 
						
  9. cojs QAQ的序列 解题报告
			
    QAQ 这是从论文上搬的一道题目 但是由于并没有找到题目地址,所以就自己造数据咯 发现数据无比难造 (本题数据极弱,暴力或可AC?) 我们考虑离线的话其实只需要莫队就可以了 那么在线怎么做呢 二进制分 ...
    
			
    10. 
						
  10. 有N个大小不等的自然数（1--N），请将它们由小到大排序。要求程序算法：时间复杂度为O(n)，空间复杂度为O(1)。
			
    #include<stdio.h> int main() { ]={,,,,,,,,}; int i,tmp; ;i<;i++) { ) { tmp=a[i]; a[i]=a[a[i ...
    
			
    11.