主页面

<!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. 前后端分离session不一致问题

    前端VUE.js 后端SSM 问题描述: 该项目的登录先由后台生成一验证码返回给前端,并保存在session中,不过当前端登录时,后台会报 NullPointerException,看前端的请求头才发 ...

  2. InfluxDB+Grafana大数据监控系列之基础环境部署（一）

    一.单节点环境部署 机器节点信息及 InfluxDB.Grafana 版本选择: 节点 Linux版本 部署服务 10.223.1.198 Centos 6.8 InfluxDB 1.7.7 10.2 ...

  3. WCAG

    WCAG What is WCAG? Web Content Accessibility Guidelines (WCAG) Overview Checklist and solve technolo ...

  4. 【Leetcode_easy】1103. Distribute Candies to People

    problem 1103. Distribute Candies to People solution:没看明白代码... class Solution { public: vector<int ...

  5. 【Leetcode_easy】746. Min Cost Climbing Stairs

    problem 746. Min Cost Climbing Stairs 题意: solution1:动态规划: 定义一个一维的dp数组,其中dp[i]表示爬到第i层的最小cost,然后来想dp[i ...

  6. iOS技术面试07：第三方框架

    1ios框架分为:cocoa Touch:UIKit.Foundation.附属框架 Media:OpenGL ES.EAGL.Quartz.Core Animation.Core Audio.    ...

  7. Direct2D 学习笔记（3）图层 Layer

    利用图层Layer绘制资源网址:https://docs.microsoft.com/zh-cn/windows/win32/direct2d/direct2d-layers-overview   1 ...

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

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

  9. 删除Excel表格中一堆英文中的汉字

    昨天需要处理一个Excel文件,删除一堆英文里的汉字,开始搜了下方法,没找到,然后手动一个多小时,弄了一半吧也就,结果电脑卡了,忘了保存,就白做了...不知道为啥这次没有自动保存,所以,重要的事说三遍 ...

  10. Spring 使用下列表

    模型层需要提供数据选项,设置错误信息 关键代码 @NotEmpty(message = "请选择兴趣爱好") private String[] hobbies; 控制器层需要在显示 ...