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