主页面

<!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. java-mybaits-013-mybatis-Interceptor-拦截器执行顺序

    一.概述 已知拦截器能够拦截四种类型:Executor.ParameterHandler.ResultSetHandler.StatementHandler. 1.1.不同类型拦截器的执行顺序 背景: ...

  2. osg机械臂模拟

    实现自由旋转  

  3. SQL 模糊查询条件的四种匹配模式

    转: 执行数据库查询时,有完整查询和模糊查询之分. 一般模糊语句格式如下: SELECT 字段 FROM 表 WHERE 某字段 LIKE 条件; 其中,关于条件,SQL提供了四种匹配模式: 1.%: ...

  4. hive-1.1.0-cdh5.11.1-src compile

    1. download cdh hive src  http://archive.cloudera.com/cdh5/cdh/5/hive-1.1.0-cdh5.11.1-src.tar.gz 2. ...

  5. Lombok子类与父类的@Builder注解冲突

    解决方法之一:去掉父类的@builder 缺点:父类不能使用Builder构造器模式 来源:https://www.cnblogs.com/lori/p/10266508.html

  6. iOS-检测网络可连接性

    #pragma mark - 监测网络的可链接性+ (void)netWorkReachabilityWithURLString:(NSString *)strUrl{    AFHTTPReques ...

  7. Xena L23网络测试仪Valkyrie使用技巧100例：修改设备管理IP，设备关机 (编号01)

    Xena Valkyrie产品提供100M~400Gbps全速率接口速率支持 产品链接 https://xenanetworks.com/valkyrie/ 需求# 1.多个用户如何共享使用一个机箱? ...

  8. conda安装的国内镜像配置，实现快速下载

    conda安装的国内镜像配置,实现快速下载 anaconda的所有的软件包全部在国外,安装起来很麻烦,关键是下载速度慢,而且经常中断,所以需要配置国内安装的镜像,下载速度就很快了. 一.conda换国 ...

  9. 《Mysql - 字符串索引应该如何建立？》

    一:概述 - 我有一个需求是需要邮箱登录的, - mysql> select f1, f2 from SUser where email='xxx'; - 我们知道,如果不在 email 上建立 ...

  10. ESP32 - 乐鑫官方Flash烧录工具使用

    第一步:打开软件flash_download_tools_v3.6.6.exe 第二步:点击ESP32 DownloadTool,启动我们板子的烧录工具 第三步:按照下图顺序,加载bin_prog目录 ...