通过案例来剖析JQuery与原生JS
首先来个例子：
我们在登陆或者注册一些网站时，如果某一项点过了但没填，鼠标移走后是不是经常看到网站有相应的红色字体提示呢？
那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别，来上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<style> /*字体设置为红色*/
.c1{
color: red;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<div class="username"><label for="i1">用户名
<input type="text" id="i1">
<span></span>
</label></div> <div class="password"><label for="i2">密码
<input type="text" id="i2">
<span></span>
</label></div>
<div><label for="">
<input type="submit" id="d1" value="提交">
</label></div>
</form>
</div> <script>
var $d1Ele = $("#d1");
var $i1Ele = $("#i1");
var $i2Ele = $("#i2"); //点击提交按钮，如果用户没有输入，则提示给用户名框、密码框下面的span插入提示文本，并给字体标注红色样式
$d1Ele.click(function () {
if (!$i1Ele[0].value){
$i1Ele.parent().children()[1].innerText = "用户名不能为空";
$i1Ele.parent().children()[1].classList.add("c1") }
if(!$i2Ele[0].value){
$i2Ele.parent().children()[1].innerText = "密码不能为空";
$i2Ele.parent().children()[1].classList.add("c1")
}
return false
});
//鼠标焦点到用户名框，清除提示文字，清除字体样式
$i1Ele.focus(function () {
$i1Ele.parent().children()[1].innerText = "";
$i1Ele.parent().children()[1].classList.remove("c1")
});
//鼠标焦点到密码框，清除提示文字，清除字体样式
$i2Ele.focus(function () {
$i2Ele.parent().children()[1].innerText="";
$i2Ele.parent().children()[1].classList.remove("c1")
});
//用户名框失去鼠标焦点，再判断用户是否输入，未输入则继续提示
$i1Ele.blur(function () {
if (!$i1Ele[0].value){
$i1Ele.parent().children()[1].innerText = "用户名不能为空";
$i1Ele.parent().children()[1].classList.add("c1")
}
});
//密码框失去鼠标焦点，再判断用户是否输入，未输入则继续提示
$i2Ele.blur(function () {
if (!$i2Ele[0].value){
$i2Ele.parent().children()[1].innerText = "密码不能为空";
$i2Ele.parent().children()[1].classList.add("c1")
}
}) </script> </body>
</html>
页面打开效果：
直接点击提交后显示效果：
随后鼠标点击用户名框时的效果：
由此，我们可以实现登陆或注册页对用户的提示。
我们来归纳其中的知识点
查找标签
jQuery和原生JS的区别
JS查找某个标签：
var i1Ele = document.getElementsByClassName(".top") //类名查找
var i1Ele = document.getElementsByTagName("p") //标签名查找
var i1Ele = document.getElementById("#i1") //ID查找
jQuery查找某个标签：
var $i1Ele = $("#i1") //id查找
var $i1Ele = $(".top") //类查找
var $i1Ele = $("p") //标签查找
var $i1Ele = $(":text") //input文本框查找
var $i1Ele = $("input:checked") //这里的input不加会默认把option的含checked的标签也检索到，所以在用checked去检索input标签时需要留意
var $i1Ele = $(":button") //input按钮标签查找
JS查找节点标签：
var test = document.getElementById("i1");
var parent = test.parentNode; // 父节点
var chils = test.childNodes; // 全部子节点
var first = test.firstChild; // 第一个子节点
var last = test.lastChile; // 最后一个子节点
var previous = test.previousSibling; // 上一个兄弟节点
var next = test.nextSibling; // 下一个兄弟节点
jQuery查找节点标签：
$("#test1").parent(); // 父节点
$("#test1").parents(); // 全部父节点
$("#test1").parents(".mui-content");
$("#test").children(); // 全部子节点
$("#test").children("#test1");
$("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
$("#test").contents("#test1");
$("#test1").prev(); // 上一个兄弟节点
$("#test1").prevAll(); // 之前所有兄弟节点
$("#test1").next(); // 下一个兄弟节点
$("#test1").nextAll(); // 之后所有兄弟节点
$("#test1").siblings(); // 所有兄弟节点
$("#test1").siblings("#test2");
$("#test").find("#test1");
JS标签对象与jQuery的相互转换
js对象转jQuery对象：$(JS对象) JS对象外套$() 即可
jQuery对象转js对象：$("#i1")[index] 取索引即可
JS原生对象和jQuery对象对属性操作的相似与不同
jQuery属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
获取：
$('div').attr('id')
设置
$('div').attr('class','box')
设置多个值，键值对存储
$('div').attr({name:'hahaha',class:'happy'}) //删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class'); 返回属性的值//与attr区别是返回值不同，prop返回布尔值
$(selector).prop(property)
设置属性和值
$(selector).prop(property,value)
设置多个属性和值
$(selector).prop({property:value, property:value,...}) $('div').addClass("box");//追加一个类名到原有的类名
$('div').addClass("box box2");//追加多个类名
$('div').removeClass('box')；移除指定的类（一个或多个）
$('div').removeClass(); 移除全部的类
$(this).toggleClass('active'); 没有则添加，有则删除，多和绑定事件配合使用 text() 获取匹配元素包含的文本内容,一般配合trim使用
console.log($('.box').text().trim()); val()用于表单控件中获取值，比如input textarea select等等
$('input').val('设置了表单控件中的值')； 文档操作：
父元素.append(子元素)
$('ul').append('<li class="item1">苏东坡</li>'); 如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作 子元素.appendTo(父元素)
父元素.prepend(子元素)；前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
子元素.prependTo(父元素)；前置添加， 添加到父元素的第一个位置
$('<li>我是第一个</li>').prependTo(‘ul’) 父元素.before(子元素)；
子元素.inserBefore(父元素)；在匹配的元素之前插入内容 修改/替换
replaceWith():替换
replaceAll() :替换所有
$('<p>哈哈哈</p>').replaceAll('h2'); 删除
remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
detach() 删除节点后，事件会保留
$('ul').remove();
$('button').detach(); empty() 清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul
$('ul').empty();
JS原生对象的属性操作
Class属性操作
添加Class
document.getElementById('head').classList.add('add') //('add1','add2')
//<div id="head" class="add"></div> 删除Class
document.getElementById('head').classList.remove('add')
//<div id="head"></div> 切换class toggle
document.getElementById('head').classList.toggle('add')
//打印true 代表添加成功，<div id="head" class="add"></div>
//打印false为删除成功, <div id="head"></div> 是否存在Class
document.getElementById('head').classList.contains('add')
//返回 true和false 返回类名在元素中的索引值。索引值从 0 开始。
<div id="head" class="add remove"></div>
document.getElementById('head').classList.item(1)
//remove 属性增删操作：
添加属性元素
document.getElementById('head').setAttribute('set', 'value');
//<div id="head" set='value'></div> 获取属性
document.getElementById('head').getAttribute('set')
//"value" 不存在为null 原生DOM增删：
//已有元素前插入元素insertBefore
<ul id="box">
<li>001</li>
</ul>
var newItem=document.createElement("li")
var lis=document.getElementsByTagName("li");
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.insertBefore(newItem,lis[0]);
//<ul id="box">
// <li>002</li>
// <li>001</li>
//</ul> 已有元素内追加元素appendChild
<ul id="box">
<li>001</li>
</ul>
var newItem=document.createElement("li")
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.appendChild(newItem);
//<ul id="box">
// <li>001</li>
//</ul> 为元素增加文本innerText 和 innerHTML
<p></p>
document.getElementsByTagName("p").innerText = "呵呵"
//<p>呵呵</p> //innerText和innerHTML用法一样，但innerHTML可以识别标签，innerText只用作插入文本
JS原生对象和jQuery对象事件绑定的区别
JS原生对象绑定事件语法：js对象.onXXX = 触发函数
document.getElementById("#d1").onclick = function(){
if (!document.getElementById("#i1").value) {
alert("请输入内容！");
}
}
jQuery对象绑定事件语法：$(".class1").on(事件名,触发函数)
$("#di").on("click",function(){
if (!$("#i1")[0].value){
alert("请输入内容");
}
})
或者
$("#di").click(function(){
if (!$("#i1")[0].value){
alert("请输入内容");
})
常用绑定事件：
| 原生JS | jQuery | 释义 |
| onclick | click(handler) | 单击 |
| dbclick(handler) | 双击 | |
| mouseenter(handler) | 鼠标移入事件 | |
| mouseleave(handler) | 鼠标离开事件 | |
| focus(handler) | 获得焦点事件（input框经常用） | |
| onblur | blur | 失去焦点事件 |
| keydown(handler) | 键盘按下事件 | |
| keyup | 键盘弹起来事件 | |
| onchange | change(handler) | 文本框值改变，下拉列表值改变等 |
| select() | 用于input 文本框里的内容都被选中 |
通过案例来剖析JQuery与原生JS的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 通过游戏认识 --- JQuery与原生JS的差异
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- jquery与原生JS实现增加、减小字号功能
预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- JQuery和原生JS跨域加载JSON数据或HTML。
前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- JavaWeb_Ajax通过JQuery和原生js异步传输数据
菜鸟教程 传送门 AJAX 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 XMLHttpRequest 对象 传送门 (一) [JQuery]定时发送ajax请求 (二) ...
随机推荐
- 题解 [51nod1274] 最长递增路径
题面 解析 这题一眼DP啊. 然而想了半天毫无思路. 后来看题解后发现可以按边权的大小顺序DP. 将边权从小到大排序,对于权值相同的边分为一组. 设\(f[i][0]\)表示经过当前权值的边后到达\( ...
- 模板方法（Template Method）---行为型
1 基础知识 定义:定义了一个算法的骨架并允许子类为一个或多个步骤提供实现.特征:模板方法使得子类可以在不改变算法结构的前提下重新定义某些步骤. 使用场景: (1)需要固定定义算法骨架,实现一个算法的 ...
- iosselect插件
好用的时间选择器/地址选择器插件 iosselect.js
- Eclise快捷键（最全）
Eclipse常用快捷键 Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补全:Alt+/ 打开外部Java ...
- 两个int值相乘超过int最大值
System.out.println(100000000*1000 ); //输出结果是:1215752192 先将100000000*1000 的结果转化为二进制: 10111 01001000 0 ...
- MongoDB系列二：MongoDB安装过程
一.MongoDB安装,以Linux系统安装为例:(下载:www.mongodb.org 注意使用stable版本) 1.下载最新版本的MongoDB安装包,wget http://fastdl.mo ...
- flask 第九篇 蓝图 Blueprint
蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看 ...
- Leetcode题目206.反转链表（简单）
题目描述: 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: ...
- spring boot通过自定义注解和AOP拦截指定的请求
一 准备工作 1.1 添加依赖 通过spring boot创建好工程后,添加如下依赖,不然工程中无法使用切面的注解,就无法对制定的方法进行拦截 <dependency> <group ...
- Nginx优化之日志优化,URL访问控制,防盗链,及站点文件目录优化
Nginx日志相关优化与安全 日志切割脚本如下: #!/bin #日志切割脚本 Date=`date +%Y%m%d` Bdir="/usr/local/nginx" Nginxl ...