通过案例来剖析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 文本框里的内容都被选中

其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

通过案例来剖析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请求 (二) ...

随机推荐

redis序列化和反序列化
RedisTemplate中需要声明4种serializer,默认为“JdkSerializationRedisSerializer”: 1) keySerializer :对于普通K-V操作时,ke ...
Spring Boot 前期篇
在学习springboot之前,学习一下Spring的java配置. 1. Spring的发展 1.1. Spring1.x 时代在Spring1.x时代,都是通过xml文件配置bean,随着项目的 ...
Semantic 导航条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
Luogu P3527 [POI2011]MET-Meteors 整体二分
思路:整体二分提交:4次错因:树状数组开的$int$ 题解: 二分操作序列,将仅用$[l,md]$即可满足要求的国家递归到左半边,将仅用$[l,md]$不能满足要求的国家,把他们的要求去掉左半边的 ...
Noip 模拟题 T2 数字对
2.数字对 [题目描述] 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R < ...
Django-视图函数/模板渲染/过滤器
一.Django的视图函数一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个 ...
oracle面试题1
1.题目要求已知关系模式:S (SNO,SNAME)学生关系.SNO 为学号,SNAME 为姓名C (CNO,CNAME,CTEACHER)课程关系.CNO 为课程号,CNAME 为课程名,CTEA ...
比较全的解释了：JAVA反射机制
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制 ...
Leetcode题目48.旋转图像（中等）
题目描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1 ...
phpinfo中敏感信息记录
比赛中或者渗透中如果遇到phpinfo,从里面发现的一些线索能够对后续的渗透和解题帮助很大,这里记录总结一下目前网上比较常用的的. 下图来源于:https://seaii-blog.com/index ...

通过案例来剖析JQuery与原生JS

通过案例来剖析JQuery与原生JS的更多相关文章

随机推荐

热门专题