js与juery基础知识对比(一)---2017-05-06
用表格做的,想要对比的内容一目了然,红色部分为重点
|
js |
jquery |
|
|
取元素 |
id: document.getElementById("aa"); 取到的是dom对象 class: var a=document.getElementsByClassName("aa"); 取到的是dom对象集 a.[0]取到的是第一个class名为aa的元素 tag: document.getElementsByTagName("div"); name: document.getElementsByName("aa"); |
ID: $a=$("#aa") 取到的是jquery对象; $a[0] 取到的是dom对象 Class: $a=$(".aa") 取到的是jquery对象; $a.eq(0)取到的是dom对象集; $a.eq(0)[0]取到的是第一个class名为aa的元素 tag: Tag: $("div") 根据属性: $("[bs=1]") |
|
操作内容 |
非表单元素: 赋值:a.innerText = "ceshi"; 取值:alert(a.innerText); 赋值:a.innerHTML = "ceshi"; 取值:alert(a.innerHTML); |
非表单元素: 赋值:a.text("hello"); 取值 alert(a.text()); 赋值:a.html("aaa"); 取值:alert(a.html()); |
|
表单元素: 赋值:a.value = "请输入用户名"; 取值:alert(a.value); |
表单元素: 赋值:a.val("aa"); 取值:alert(a.val()); |
|
|
操作属性
|
a.getAttribute("bs");获取属性 a.setAttribute("test","test"); 添加属性 a.removeAttribute("bs"); 移除属性 |
a.attr("bs")); 获取属性 a.attr("test","test"); 添加属性 a.removeAttr("bs"); 移除属性 |
|
操作样式 |
alert(a.style.color); 获取样式 a.style.color = "green"; 设置样式 注: 1、只能操作内联 2、style里的background-color属性在js中会变成backgroundColor |
alert(a.("color")); 获取样式 a.css("background-color","red");设置样式 注: 1、可以操作内联,内嵌,外部 2、style里的background-color属性在jquery中不变 |
|
加事件
|
onblur="b()" |
$("#cc").blur(function(){ alert("失去焦点了"); }) 注:没有函数名的函数为匿名函数 |
js与juery基础知识对比(一)---2017-05-06的更多相关文章
- js与jquery基础知识对比(一)---2017-05-06
用表格做的,想要对比的内容一目了然,红色部分为重点 js jquery 取元素 id: document.getElementById("aa"); 取到的是dom对象 cla ...
- three.js学习笔记--基础知识
基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...
- JS 数组的基础知识
数组 一.定义 1.数组的文字定义 广义上说,数组是相同类型数据的集合.但是对于强类型语言和弱类型语言来说其特点是不一样的.强类型语言数组和集合有以下特点. 数组强类型语言:1.数组里面只能存放相同数 ...
- 云笔记项目-补充JS面向对象编程基础知识
简单介绍: 此部分知识为在做云笔记项目中补充,因为云笔记项目中涉及到前端js,里面写了很多js脚本,用到了创建js属性和方法,在js中直接声明的属性和方法最终都会变成window的对象,即其成为了全局 ...
- JS原型函数相关基础知识
函数对象和普通对象 //普通对象 var oo1 = {}, oo2 = new Object(), oo3 = []; console.log(typeof oo1 + ',' + typeof o ...
- c#基础知识对比(面向对象)
private,protected,public和internal private:是完全私有的,只有本类自己能用[好比自己的老婆,只有你自己可以调用,其他谁都不可以] protected:可被外界看 ...
- Java基础知识强化之多线程笔记06:Lock接口 (区别于Synchronized块)
1. 简介 我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方式 ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列,RabbitMQ的应用场景以及基本原理介绍,RabbitMQ基础知识详解,RabbitMQ布曙
消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...
随机推荐
- 【SF】开源的.NET CORE 基础管理系统系列导航
SF是一套基于ASP.NET Core MVC+EFCore+Bootstrap开发出来的基础管理系统,源代码完全开源,可以帮助你解决C#.NET项目中重复编码的繁琐工作,让开发人员远离加班! SF ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python可视化学习(1):Matplotlib的配置
Matplotlib是一个优秀的可视化库,它提供了丰富的接口,让Python的可视化落地显得非常容易上手.本系列是本人学习python可视化的学习笔记,主要用于监督自己的学习进度,同时也希望和相关的博 ...
- pyqt样式表语法笔记(中)
pyqt样式表语法笔记(中) pyqt QSS python 样式表 一.弹窗 在日常的各种桌面软件的使用中,我们都会碰到弹窗.例如注册,登录的时候,会有相应的信息弹窗,这里就以信息收集弹窗为例进行弹 ...
- java入门了解02
1:JDK,JRE,JVM的作用关系 (一)作用 JVM:提供java跨平台 JRE:java运行环境 JDK:java开发环境 ...
- TypeScript入门-接口
▓▓▓▓▓▓ 大致介绍 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. ▓▓▓▓▓▓ 接口 例子: function printLabel(labelledO ...
- web console实现
一.效果图 二.实现 web console是基于websocket实现的. 以上做的效果嵌入项目中,因为项目本身是angular1的项目,所以console整体封装成一个angualr modul ...
- 老李推荐:第6章7节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-注入按键事件实例
老李推荐:第6章7节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-注入按键事件实例 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜 ...
- Linux文件管理上
Linux文件管理 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 对于计算机来说,所谓的数据就是0和1的序列.这样的一个序列 ...
- Wireless Intranet Captive Portal
Wireless Intranet Captive Portal 配置AAA服务Radius认证 radius-server key 0 radius radius-server authentica ...