主页面

<!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. Oracle SQL 脚本跟踪

    NC Oracle SQL 脚本跟踪 脚本: select * from v$sqlarea a and a.LAST_ACTIVE_TIME >= to_date( '2013-02-21 1 ...

  2. nginx多个if条件并且查询

    set $flag 0; if (!-e $request_filename){    set $flag "${flag}1"; } if ($uri ~* "^(.* ...

  3. Spring Boot学习笔记——搭建一个最简单的hello world

    使用Spring Initializer新建项目 进入https://start.spring.io/新建一个项目,并下载下来. 这就是一个最基础的spring boot项目了. 我这里是基于spri ...

  4. python：解析requests返回的response（json格式）

    import requests, json r = requests.get('http://192.168.207.160:9000/api/qualitygates/project_status? ...

  5. go context源码解析

    go 的context贯穿整个goroutine的运行控制的中枢,可以实现执行的生命周期的控制. Context是一个接口,他派生了context.emptyCtx(TODO),cancelCtx,t ...

  6. 记录项目中easyui的运用

    1.实现合并列,且文字显示居左,背景为固定颜色 效果图: 实现代码: $('#tab').datagrid({ title : '', //表格标题 iconCls : 'icon-list', // ...

  7. 使用Apache服务部署网站（基于IP，域名，端口）

    本篇主要学习Apache网站服务程序的基本部署,基于IP地址.主机名(域名).端口号的虚拟主机功能. 1.基于IP地址 首先我们需要在虚拟机中线安装Apache服务程序,Apache服务程序的软件包名 ...

  8. python线程事件Event（30）

    在python项目开发中,线程thread使用是比较常见的,在前面的文章中我们介绍了 python线程的创建 以及 线程互斥锁 ,今天还要额外介绍一个与线程相关的内容 – 事件Event. 一.pyt ...

  9. Java线程池的使用方式，核心运行原理、以及注意事项

    为什么需要线程池 java中为了提高并发度,可以使用多线程共同执行,但是如果有大量线程短时间之内被创建和销毁,会占用大量的系统时间,影响系统效率. 为了解决上面的问题,java中引入了线程池,可以使创 ...

  10. （模板）poj1113（graham扫描法求凸包）

    题目链接:https://vjudge.net/problem/POJ-1113 题意:简化下题意即求凸包的周长+2×PI×r. 思路:用graham求凸包,模板是kuangbin的. AC code ...