Javascript和Jquery语法对比总结
目的
相信大家都知道jq是js的一个类库,是为了方便我们开发前端,但是笔者在刚开始学习js和jq时经常将两者的语法记混和混用,所以整理下两者实现相同功能之前的语法区别。
声明变量
javascript声明变量
语法 var + 变量名 =值;或者 let + 标量名=值;ES6新增了let命令,用于声明变量。其用法类似于var(全局变量),但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。
var name = Kingfan; //var 表示全局变量
var list = [1,2,3,4] //声明一个数组
for(let i=0;i<list.lenght;i++) // i只在for循环的时候在用到,所以没必要声明一个全局变量,所以用let声明
{
console.log(list[i])
}
Jquery声明变量
jq并没有对声明变量进行封装,与js声明标量的方法完全一致。
查找标签
查找标签的本质就是选择器和筛选器,在jq中对原生js的语法进行了很多优化和简写,所有有明显的不同但也相似,所以小心记混!!!,另外js对象只能用js的语法和方法,同理jq对象也是!。
js查找标签
document.getElementById //根据ID获取一个标签
document.getElementsByClassName //根据class属性获取
document.getElementsByTagName //根据标签名获取标签合集
//上面得到一个对象或者多个对象的集合
//根据js对象可以调用下面方法进行间接查找
对象.parentElement // 父节点标签元素
对象.children //所有子标签
对象.firstElementChild //第一个子标签元素
对象.lastElementChild //最后一个子标签元素
对象.nextElementSibling //下一个兄弟标签元素
对象.previousElementSibling //上一个兄弟标签元素
Jquery查找标签(获得jq对象)
$("#id") //根据id查找
$("tagName") //根据标签查找
$(".className") //根据类名查找
$("div.c1") // 找到有c1 class类的div标签
$("#id, .className, tagName") //组合查找
$("x y"); // x的所有后代y(子子孙孙)
$("x > y"); // x的所有儿子y(儿子)
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
//基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
//例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
//属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
//表单筛选器:
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//例子:
$(":checkbox") // 找到所有的checkbox
例子:
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option:
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
jq筛选器
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
补充:
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
标签操作
jq
//样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
//示例:开关灯和模态框
//CSS
css("color","red")//DOM操作:tag.style.color="red"
//示例:
$("p").css("color", "red"); //将所有p标签的字体设置为红色
js
class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
Javascript和Jquery语法对比总结的更多相关文章
- javascript 和 jquery 语法上的一些区别
jQuery 能大大简化 Javascript 程序的编写,我最近花时间了解了一下 jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助.要使用 jQuery,首先要在 HTML 代码 ...
- JavaScript与jquery的对比
javascript jQuery 入口函数 只能有一个,如果有多个,后面的会覆盖前面 可以有多个,并且不会发生覆盖的情况 代码容错性 代码容错性差,代码出现错误,会影响到后面代码的运行. 代码容 ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
- js与jQuery方法对比
javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...
- vue、react、angular三大框架对比 && 与jQuery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
- Jquery语法基础
Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l 美元符号定义 jQuery (又称工厂函数) l 选择器(selector)“查询”和“查找” ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
- JavaScript和JQuery好书推荐
其实无论你是php/python/java还是c/c++,只会自己那点知识是无法独立完成一个站点的建设的! 如果你因自己能力不足拒绝过几次亲友的建站请求,或者因合作中不了解前端是什么东西而失去过几次创 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
随机推荐
- 生成ssh公钥
部分内容参考:http://git.mydoc.io/?t=154712 1.在电脑桌面上右键,选择git Base here 2.生成ssh公钥 ssh-keygen -t rsa -C" ...
- 使用Filter过滤器+重写Request完美解决乱码问题
一:原理 1.对于Post方式提交的数据,我们可以通过直接设置request和response的编码方式来解决乱码问题:但是Get方式提交的数据,那么就需要编码再解码的方式解决乱码问题. 2.我们一般 ...
- Maven项目远程部署到Tomcat
目录 Maven项目远程部署到Tomcat 一.Tomcat插件支持的目标 二.系统要求及插件引入 2.1 系统要求 2.2 引入插件 三.远程部署war到tomcat 3.1 添加tomcat管理角 ...
- centos 7 安装elasticsearch
安装java1.8 详见:http://www.cnblogs.com/cgyqu/p/7271480.html 安装es cd /usr/local mkdir elasticsearch cd e ...
- docker搭建mysql
下载mysql镜像 [root@localhost ~]# docker pull mysql: 创建mysql容器 [root@localhost ~]# docker run -itd --nam ...
- 微软是如何让我再次爱上.Net Core和C#的
“为什么你还想用ASP.NET,难道你还活在90年代吗?”这正是我的一位老同事在几年前我们即将开始的项目中我提出考虑使用ASP.NET时所说的话.当时我很大程度上认同他的看法,微软已经开发了伟大的开发 ...
- marMariaDB & MYSQL flexviews
Using Flexviews - part one, introduction to materialized views - Percona Database Performance Bloght ...
- Git之项目使用
现在最为盛行的版本控制器,非git莫属了, 那就看看在项目中我们是如何使用它的吧 一. 在已经存在秘钥对的情况下,我们需要在本地进行相关配置 git config --global user.name ...
- babel (二) update to v7
一.rootmode In 7.1, we've introduced a rootMode option for further lookup if necessary. 二.Remove prop ...
- C#中闭包的陷阱
我们在使用lambda的时候会遇到闭包,在闭包中有一个陷阱是在for循环中产生的,先上代码: class Program { static void Main(string[] args) { Act ...