主页面

<!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: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>

<script type="text/javascript">

//下面单独写出此内容

</script>

</html>

下面进行一些简单的对比

js:

//找元素

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

alert(a);

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

alert(a[2]);

document.getElementsByTagName("div");

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

alert(a[0]);

JQuery：

//找元素

var a = $("#aa");

alert(a);

var a = $(".a1");

alert(a.eq(2));

var a = $("div");

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

alert(a);

js:

//操作内容

//非标单元素

alert(a.innerText); //文本

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

//表单元素

alert(a.value);

a.value="hello";

JQuery：

//操作内容

//非表单元素

alert(a.text());

alert(a.html());

//表单元素

a.val("hello");

JS:

//操作属性

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

a.removeAttribute("test");

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

//操作样式

a.style.fontSize = "30px";

alert(a.style.color);

JQuery：

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//操作属性

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"));

//操作样式

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

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

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);
//事件

$("#ck").click(function(){

    //alert($(this));

    //$(this)选取自身元素

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

    }) //匿名函数

JS与JQuery的一些对比的更多相关文章

  1. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  2. Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

    讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. ...

  3. js与jquery基础知识对比（一）---2017-05-06

    用表格做的,想要对比的内容一目了然,红色部分为重点   js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...

  4. 原生JS与jQuery操作DOM对比

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p&g ...

  5. js与jQuery方法对比

      javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...

  6. 原生js 与 jQuery对比

    1.原生JS与jQuery操作DOM对比  :   https://www.cnblogs.com/QianBoy/p/7868379.html 2.比较jQuery与JavaScript的不同功能实 ...

  7. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  8. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. Linux交换空间（swap space）的那些优缺点

    下面的所有例子都在ubuntu-server-x86_64 16.04下执行通过 什么是swap? swap space是磁盘上的一块区域,可以是一个分区,也可以是一个文件,或者是他们的组合.简单点说 ...

  2. IDEA 不编译java以外的文件

    解决办法:修改pom 文件 <build> <resources> <resource> <directory>src/main/java</di ...

  3. 123457123456#1#-----com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01

    com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01

  4. Spring事务的隔离级别和传播机制

    七个传播机制:(红色字体的代表如果不设置传播机制时候默认的)PROPAGATION_REQUIRED-支持当前事务;如果不存在,创建一个新的. PROPAGATION_SUPPORTS-支持当前事务; ...

  5. 基于JOSE4J 实现的OAUTH TOKEN

    jose4j / JWT Examples View History JSON Web Token (JWT) Code Examples Producing and consuming a sign ...

  6. xcode出现the file couldn't be opened怎么解决

    右键——show In finder——显示xcode包内容——将有数字的删除——把有用的xcode双击

  7. sonar：windows重启sonar

    登录后操作

  8. （CVE-2017-7494）Samba远程代码执行[Linux]

    简介 此漏洞是针对开启了共享的smb服务 漏洞利用 启动msfconsole search is_known_pipename   搜索此模块 use exploit/linux/samba/is_k ...

  9. Codis-proxy的配置和启动

    生成配置文件,即将现有的配置文件输出到指定目录位置: ./codis-proxy --default-config | tee conf/proxy.toml 修改配置文件信息: vi conf/pr ...

  10. 服务器NGINX连接数

    kill -HUP 1900  重启某个进程! 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} ...