主页面

<!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. iOS8.0如何使用Touch ID来做验证

    对于Objective-C而言,只要几行代码即可搞定. 比如: #import <LocalAuthentication/LocalAuthentication.h> - (void)vi ...

  2. alpha测试和beta测试的区别是什么？

    1.测试时间不同: Beta测试是软件产品完成了功能测试和系统测试之后,在产品发布之前所进行的软件测试活动,它是技术测试的最后一个阶段. alpha测试简称“α测试”,可以从软件产品编码结束之时开始, ...

  3. osgText::Text osg字体

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_17-认证接口开发-申请令牌测试

    远程 调用Spring Security来申请令牌,然后把申请到令牌存储到redis里面 cookieMaxAge: ‐1   -1表示浏览器一关闭cookie就失效. 测试远程申请令牌 TestCl ...

  5. spark实现wordcount

    spark-shell --master yarnsc:val lineRDD=sc.textFile("/test/input/test")lineRDD.collect().f ...

  6. c-lodop的三个进程和一个服务介绍

    在windows任务管理器里,最新版可以看到有三个进程,例如安32位c-lodop的时候,有CLodopPrint32.exe.CLodopPrint32_backup.exe.CLodopServi ...

  7. 【c# 学习笔记】继承

    在c#中,一个类可以继承另外一个已有的类(密封类除外),被继承的类称为基类(或父类),继承的类称为派生类(或子类),子类将获得基类 除构造函数和析构函数以外的所有成员.此外,静态类是密封的,也不能被继 ...

  8. 【C/C++开发】ffplay中的FrameQueue的自我理解

    最近在研究ffplay,以下是本人今天在研究FrameQueue的时候整理的笔记,如有错误还请有心人指出来~ //这个队列是一个循环队列,windex是指其中的首元素,rindex是指其中的尾部元素. ...

  9. table列表全选

    <table><tr><td><input type="checkbox" /></td><td></ ...

  10. csu 1909: Perfect Chocolate

    1909: Perfect Chocolate Submit Page   Summary   Time Limit: 3 Sec     Memory Limit: 128 Mb     Submi ...