一.找元素：

<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:100px; height:100px;}

</style>

</head>

<body>

<div id="aa" style="color:red"><span>aaaaaa</span></div>

<div class="a1">div1</div>

<div class="a1">div2</div>

<span class="a1" bs="1">span1</span>

<input type="text" name="uid" id="bd" value="aa" />

<input type="checkbox" id="ck" /> 全选

<br />

<br />

<input type="checkbox" class="ck" />

<input type="checkbox" class="ck" />

<input type="checkbox" class="ck" />

<input type="checkbox" class="ck" />

<input type="checkbox" class="ck" />

</body>

</html>

　　1.id

　　　　　　javescript：var a = document.getElementById("aa");

　　　　　　jquery：    var  a = $("#aa");

　　2.class

　　　　　　javescript：var a = document.getElementsByClassName("a1");

　　　　　　jquery：　　var a = $(".a1");

　　3.name

　　　　　　javescript：var a = document.getElementsByName("uid");

　　　　　　jquery:   　没有专门的方法

　　　　　　　　　　　　var a = $("div");

　　　　　　　　　　　　var a = $("[bs=1]");

二.操作内容：

　　1.javescript：

//非标单元素

  alert(a.innerText); //文本

  alert(a.innerHTML); //HTML代码

//表单元素

  alert(a.value);

  a.value="hello";

　　2.jquery:

//非表单元素

  alert(a.text());

  a.text("bbbbb");

  alert(a.html());

//表单元素

 a.val("hello");

三.操作属性

　　1.javescript：

a.setAttribute("test","test");

a.removeAttribute("test");

alert(a.getAttribute("value"));

　　2.jquery:

a.attr("test","test");

a.removeAttr("test");

alert(a.attr("value"));

a.prop("test","test");

a.removeProp("test");

alert(a.prop("test"));

a.prop("checked",true);

alert(a.prop("checked"));

四.操作样式：

　　1.javescript：

a.style.fontSize = "30px";

alert(a.style.color);

　　2.jquery:

a.css("background-color","green");

alert(a.css("width"));

五.统一操作：

　　1.javescript：

var d = document.getElementsByClassName("a1");

for(var i=0;i<d.length;i++)

{

    d[i].style.fontSize = "30px";

}

　　2.jquery:

$(".a1").css("font-size","30px");

$(".ck").prop("checked",true);

jquery与javescript的区别（一）的更多相关文章

  1. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  2. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  3. jquery deferred done then区别

    jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属 ...

  4. jQuery和AngularJS的区别

    这篇文章主要介绍了jQuery和AngularJS的区别浅析,本文着重讲解一个熟悉jQuery开的程序员如何应对AngularJS中的一些编程思想的转变,需要的朋友可以参考下   最近一直在研究ang ...

  5. jQuery和Vue的区别

    1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...

  6. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

  7. jQuery length 和 size()区别

    jQuery length和size()区别总结如下: 1.length是属性,size()是方法. 2.如果你只是想获取元素的个数,两者效果一样既 $("img").length ...

  8. Jquery ajax, Axios, Fetch区别

    1.   Jquery ajax, Axios, Fetch区别之我见 2.   ajax.axios.fetch之间的详细区别以及优缺点

  9. jQuery与js的区别，并有基本语法详解，

    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...

随机推荐

  1. [翻译] C# 8.0 新特性 Redis基本使用及百亿数据量中的使用技巧分享（附视频地址及观看指南） 【由浅至深】redis 实现发布订阅的几种方式 .NET Core开发者的福音之玩转Redis的又一傻瓜式神器推荐

    [翻译] C# 8.0 新特性 2018-11-13 17:04 by Rwing, 1179 阅读, 24 评论, 收藏, 编辑 原文: Building C# 8.0[译注:原文主标题如此,但内容 ...

  2. （一）Mina源代码解析之总体架构

    Apache Mina Server 是一个网络通信应用框架.也就是说,它主要是对基于TCP/IP.UDP/IP协议栈的通信框架(当然,也能够提供JAVA 对象的序列化服务.虚拟机管道通信服务等).M ...

  3. bcdedit

    我的电脑装了双系统:Win2003 SP2(C盘)和Win2008 SP2(D盘),最近2003一启动就蓝屏unknown hard error,安全模式也进不去,恢复注册表等方法试过也不行,但200 ...

  4. informix-時間格式的各種用法

    以下是我在網路上所收集到的關於informix 時間的sql函數用法,有在使用informix資料庫的人,可以參考看看囉! today,返回現在系統日期 current 返回現在日期含時間,相當於sq ...

  5. AngularJS中的$apply

    $apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件.setTimeout.XHR或其他第三方的库. 当仅仅使用Angular所提供的对象时,你不该过多的 ...

  6. Genymotion INSTALL_FAILED_CPU_ABI_INCOMPATIBLE

    出现这个错误的原因是Genymotion默认的处理器是x86的,不是arm的.所以安装的时候会出错,仅仅要把x86转换成arm就能够了. 转换方法: 1.下载转换的zip文件:X86 to ARM 2 ...

  7. java运算符优先级和结合性

    运算符 结合性 [ ] . ( ) (方法调用) 从左向右 ! ~ ++ -- +(一元运算) -(一元运算) 从右向左 * / % 从左向右 + - 从左向右 << >> & ...

  8. 禁止Chrome浏览器自动升级

    对于我们测试人员来说,浏览器自动升级是非常可怕的,浏览器的升级会导致出现各种bug,比如我们常用的Selenium,如果Chrome浏览器自动升级就会导致脚本出错,无法打开浏览器等等情况,对于这种情况 ...

  9. [转]__cdecl与__stdcall

    来自Programming Windows 5th Edition The WinMain function is given a type of WINAPI (as is every Window ...

  10. js代码中定义后台java中的上下文路径

    var href = <c:out value='${sessionScope.contextPath}' />