11月14日:jquery

学习并使用jquery

一：jquery概述

jq就是Javascript的的仓库

仓库：可以把很多东西放到这个仓库里，使用的时候在仓库中找就行。

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）从封装一大堆函数的角度理解库，就是在这个库中封装了很多预先定义好的函数在里面，比如hide()、show(）比如获取元素等等；

简单理解：就是一个js文件，里面对我们原生的js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

学习jQuery的本质就是学习调用这些函数（方法）。

二、jquery的基本使用

jQuery版本：

1x：兼容IE 678等低版本浏览器，官网不再更新

2x：不兼容IE 678等低版本浏览器，官网不再更新

3x：不兼容IE 678等低版本浏览器，是官方主要更新维护的版本

常用如：浏览器中的jquery cdn、还有本地文件引入

jQuery两种文件的区别：

1、jquery.js：更适合于开发使用。是完整的未压缩的jQuery库，文件比较大。

2、jquery.min.js：是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。

jQuery的入门函数：

文档就绪事件:

$(document).ready(function(){

//开始写jQuery代码

});

2.简洁写法

$(function(){

//开始写jQuery代码..

});

1．等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

2.相当于原生js 中的 DOMContentLoaded。
3．不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

4．更推荐使用第一种方式。

图示来自：菜鸟编程

jQuery的顶级对象$

 <script>// 1. $ 是jQuery的别称（另外的名字）// $(function() {//     alert(11)// });jQuery(function() {// alert(11)// $('div').hide();jQuery('div').hide();});// 2. $同时也是jQuery的 顶级对象</script>

DOM对象和jQuery对象

 <script>// 1. DOM 对象：  用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector('div'); // myDiv 是DOM对象var mySpan = document.querySelector('span'); // mySpan 是DOM对象console.dir(myDiv);// 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装$('div'); // $('div')是一个jQuery 对象$('span'); // $('span')是一个jQuery 对象console.dir($('div'));// 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法// myDiv.style.display = 'none';// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法</script>

DOM对象和jQuery对象相互转换

<script>// 1. DOM对象转换为 jQuery对象// (1) 我们直接获取视频，得到就是jQuery对象// $('video');// (2) 我们已经使用原生js 获取过来 DOM对象var myvideo = document.querySelector('video');// $(myvideo).play();  jquery里面没有play 这个方法// 2.  jQuery对象转换为DOM对象// myvideo.play();$('video')[0].play()$('video').get(0).play()</script>

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器：

jquery元素选择器基于元素名选取元素。在页面中选取所有$("a")<a>元素.

#id选择器：

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过#id选择器。

写法：$("#id")

.class选择器

jQuery类选择器可以通过指定的class查找元素

写法：$(".class")

隐式迭代

隐式迭代：遍历内部DOM元素(伪数组形式存储)的过程

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们进行调用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script>
</head><body><div class="yeye"><div class="father"><div class="son">儿子</div></div></div><div class="nav"><p>我是屁</p><div><p>我是p</p></div></div><script>// 注意一下都是方法 带括号$(function() {// 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸console.log($(".son").parent());// 2. 子// (1) 亲儿子 children()  类似子代选择器  ul>li// $(".nav").children("p").css("color", "red");// (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器$(".nav").find("p").css("color", "red");// 3. 兄});</script>
</body></html>

案例：下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./jq/jq.js"></script>
</head>
<body><script>$(function(){$("#menu").mouseleave(function (){$(this).children("#li").hide();});$("#menu").mouseenter(function (){$(this).children("#li").show();});})</script>
<div id="menu"><span>抖音</span><div id="li"><div>推荐</div><div>朋友</div><div>我的</div></div>
</div>
</body>
</html>

筛选方法：兄弟

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script>
</head><body><ol><li>我是ol 的li</li><li>我是ol 的li</li><li class="item">我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li></ol><ul><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li><li>我是ol 的li</li></ul><div class="current">俺有current</div><div>俺木有current</div><script>// 注意一下都是方法 带括号$(function() {// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟$("ol .item").siblings("li").css("color", "red");// 2. 第n个元素var index = 2;// (1) 我们可以利用选择器的方式选择// $("ul li:eq(2)").css("color", "blue");// $("ul li:eq("+index+")").css("color", "blue");// (2) 我们可以利用选择方法的方式选择 更推荐这种写法// $("ul li").eq(2).css("color", "blue");// $("ul li").eq(index).css("color", "blue");// 3. 判断是否有某个类名console.log($("div:first").hasClass("current"));console.log($("div:last").hasClass("current"));});</script>
</body></html>

链式编程：console.log($(".tab_con .text").eq($(this).index()).show());

实现京东下拉框选中的显示内容

<!DOCTYPE HTML>
<html lang="en">
<head><meta charset="UTF-8"><title>京东下拉框</title><script src="./jq/jq.js"></script>
</head>
<body><script>$(function (){$(".tab_con .text").hide();$(".tab_list li").click(function (){//console.log($(this).index());//var index = $(this).index();//$(".text").show();//如果点击那个索引对应出现下面的内容$(".tab_con .text").hide();console.log($(".tab_con .text").eq($(this).index()).show());// if($(".tab_con .text").index===$(this).index){//     $(".tab_con .text").show();// }})})</script><div class="tab"><div class="tab_list"><ul><li class="head">商品介绍</li><li>规格包装</li><li>售后保障</li><li>商品评价</li><li>本店好评商品</li></ul></div><div class="tab_con"><div class="text">商品介绍文字</div><div class="text">规格包装文字</div><div class="text">售后保障文字</div><div class="text">商品评价文字</div><div class="text">本店好评商品文字</div></div></div>
</body>
<style>li{color: black;display: inline-block;}
</style>
</html>

11月14日:jquery相关推荐

分享Silverlight/WPF/Windows Phone一周学习导读(11月14日-11月20日)
分享Silverlight/WPF/Windows Phone一周学习导读(11月14日-11月20日) 本周Silverlight学习资源更新 Silverlight App.xaml用途 Jaso ...
11月14日，西安，听说有一节百度AI快车道课程在等你上车
他们拥有比其他人更坚韧的耐力,他们对技术充满激情,他们可雷打不动同一坐姿保持整天,他们技能值与发量常常成反比,他们最讨厌的人是八阿哥(bug).他们可不是什么新物种,而是代码世界的"挑战者& ...
vivo S5官方广告正式揭晓：11月14日发布！
此前不久,一款被称为vivo S5的全新机型开始得到官方的预热,随后关于该机的爆料逐渐开始丰富起来,尤其该机首次采用的开孔全民屏和菱形摄像头得到了不少用户的关注.现在有最新消息,作为最擅长营销的厂商之 ...
qt emit是什么意思_2020年11月14日无赞赏QT吗哪：在历史的掌权者面前作信心的决断...
QT是Quiet Time的简称,是敬虔时刻的意思:QT也就是灵修. QT(灵修)是每位基督徒每天生命中的需要,就如同人肉体每天需要食物一样,所以QT是基督徒每天成长的必须:并且最有效的QT就是早上( ...
【财经期刊FM-Radio｜2020年11月14日】
title: [财经期刊FM-Radio|2020年11月14日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 能源股创最大周涨幅,欧美股市反弹连涨两周,中概新能源车盘中大逆转跌落 ...
2017年11月14日星期二
2017年11月14日周二 TODO 机器学习 Andrew Ng 2 机器学习 Andrew Ng 3 机器学习 Andrew Ng 4 机器学习 Andrew Ng 5 机器学习 Andrew ...
11月14日火箭vs灰熊视频直播在线观看
<script src='Http://code.xrss.cn/AdJs/csdntitle.Js'></script> 11月14日火箭vs灰熊全场视频 11月14日火箭v ...
300英雄11月服务器维护,《300英雄》【公告】2019年11月14日06:00-09:00全区停机更新公告...
2019年11月14日06:00-09:00全区停机更新公告尊敬的<300英雄>玩家: <300英雄>将定于2019年11月14日06:00-09:00(星期四),对所有大区 ...
明日之后服务器什么时候维护好,明日之后11月14日维护什么时候结束
明日之后在今天早上6点半开启了停服维护,目前服务器还未开启,来看看9k9k小编rayxx带来的明日之后11月14日维护什么时候结束. 亲爱的幸存者, 我们将于11月14日(周三)早上6点30分进行例行 ...

11月14日:jquery

11月14日:jquery相关推荐

最新文章

热门文章