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),是分布式系统中重要的组件,其通用的使用场景可以 ...
随机推荐
- 2015.07.20MapReducer源码解析(笔记)
MapReducer源码解析(笔记) 第一步,读取数据源,将每一行内容解析成一个个键值对,每个键值对供map函数定义一次,数据源由FileInputFormat:指定的,程序就能从地址读取记录,读 ...
- WIMP环境搭建
h1 { color: #3366ff } p { font-size: 16px } body { background-color: rgb(200,200,169) } 环境说明 系统:wind ...
- [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:<> [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView) 在RecyclerV ...
- 数据库DQL操作(重点)
*****DQL -- 数据查询语言 查询不会修改数据库表记录!一. 基本查询//emp表名1. 字段(列)控制1) 查询所有列 SELECT * FROM 表名; SELECT * FROM em ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- 手机自动化测试:Appium源码之api(1)
手机自动化测试:Appium源码之api(1) AppiumDriver getAppStrings() 默认系统语言对应的Strings.xml文件内的数据. driver.getAppStri ...
- 浩哥解析MyBatis源码(五)——DataSource数据源模块之非池型数据源
1 回顾 上一篇中我解说了数据源接口DataSource与数据源工厂接口DataSourceFactory,这二者是MyBatis数据源模块的基础,包括本文中的非池型非池型数据源(UnpooledDa ...
- JSP自定义不带属性和标签体的简单标签
1. 新建HelloTag类 2. 添加额外的Jar包 (1). 右键项目 -> Build Path -> Configure Build Path -> Libraries -& ...
- linux sort命令详解(转)
sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位来排序. 参 数 ...
- yii2.0套用模板问题
载入视图 在控制器中: $this->render(); 会加载布局 $this->renderPartial(); 不会加载布局(也不能载入框架自带的jquery等) Yii2 选择布局 ...