jQuery learn 01

最新推荐文章于 2023-01-16 20:33:46 发布

Gem__

最新推荐文章于 2023-01-16 20:33:46 发布

阅读量177

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/Gemming_/article/details/103378938

版权

jQuery概念：

jQuery 是一个快速、简洁的 JavaScript 库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。

学习jQuery本质：就是学习调用这些函数（方法）。【方法()】

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

其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

j 就是 JavaScript；   Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。


别人写好的JS库，我们拿过来用

JavaScript 库

jQuery

Prototype

YUI

Dojo

Ext JS

l移动端的zepto

这些库都是
对原生 JavaScript 的封装，内部都是用JavaScript 实现的，我们主要学习的是 jQuery。

jQuery 的优点

轻量级。核心文件才几十kb，不会影响页面加载速度

链式编程、隐式迭代

对事跨浏览器兼容。基本兼容了现在主流的浏览器

样式、动画支持，大大简化了DOM操作

5/支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等

免费、开源

jQuery 的下载

官网地址： https://jquery.com/

版本：

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

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

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

其他版本：https://code.jquery.com/

jQuery 的使用步骤

下载jQuery
引入 jQuery 文件
使用即可

jQuery入门

jQuery 的入口函数

第一种：

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;

第二种：

$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

注意点：

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

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

更推荐使用第一种方式。

jQuery 的基本使用

jQuery 的顶级对象 $

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。

2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象

$('div').css('属性', '值')     小知识点 

js的对象只能用JS的属性和方法

Jq的对象只能用JQ的属性和方法

目的：学会区分

用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】

jQuery 方法获取的元素就是 jQuery 对象【$(‘div’)等】

jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）

特别注意

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

相互转换

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM 对象转换为 jQuery 对象： $(DOM对象)

jQuery 对象转换为 DOM 对象（两种方式）

$(‘div’) [index] index 是索引号

$(‘div’) .get(index) index 是索引号

jQuery 常用API

目标

jQuery 选择器
jQuery 样式操作
jQuery 效果
jQuery 属性操作
jQuery 文本属性值
jQuery 元素操作
jQuery 尺寸、位置操作

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准

选择器：用来获取元素

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

$('#id')==》指定id元素

$('*')==》所有元素

$('.class')==》指定class元素

$('div')==》根据标签获取元素

$('div,p,li')==》获取多个

$('li.class')==>交集获取

$('ul>li')==>子代

$('ul li')==>后代

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代

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

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
	<script type="text/javascript">
		// 因为：隐式迭代
		$('ul li').css('background','blue');

		// 等同于
		// var lis = document.querySelectorAll('li');
		// for (var i = 0; i < lis.length; i++) {
		// 	lis[i].style.background = 'red';
		// }
	</script>
</body>

jQuery 筛选选择器

$(‘li:first’)：第一个元素

$(‘li:last’)：最后一个元素

$(‘li:eq(2)’)==》索引为2【查找指定索引的元素】

$(‘li:odd’)==》索引为奇数

$(‘li:even’)==》索引为偶数

注意：索引是从0开始的

jQuery 筛选方法

$(‘选择器’).方法()

$(‘li’).parent()父级

$(‘ul’).children(‘li’);子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】

$(‘ul’).find(‘li’)后代

$(‘li’).siblings(‘li’)兄弟

$(‘li’),nextAll();后面的

$(‘li’).prevAll();前面的

判断是否具有某个类名：$(‘div’).hasClass(‘aaa’)

$(‘div’).eq(index);指定索引方法【eq推荐用方法】

重点记住： parent()  children()  find()  siblings()  eq()
小知识点：添加事件，show方法，hide方法，toggle方法

案例下拉菜单

jQuery 里面的排他思想

案例：多个按钮点击改变当前按钮颜色，其他的不变

【index()获取索引值】

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);

$(this).siblings(). css(“color”,””); 

案例：淘宝服饰精品案例【index()获取索引值】


②需要得到当前小li 的索引号，就可以显示对应索引号的图片

③jQuery 得到当前元素索引号 $(this).index()  

⑤显示元素 show()   隐藏元素 hide()

链式编程

$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);

按钮案例

jQuery 样式操作

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

操作 css 方法

参数只写属性名，则是返回属性值【$(this).css(''color'');】

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号【$(this).css(''color'', ''red'');】

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
【$(this).css({ "color":"white","font-size":"20px"});】

设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点

添加类【$(“div”).addClass(''current'');】

移除类【$(“div”).removeClass(''current'');】

切换类【$(“div”).toggleClass(''current'');】


原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

***案例：*tab栏切换

点击上部的li，当前li 添加current类，其余兄弟移除类。

点击的同时，得到当前li 的索引号

让下部里面相应索引号的item显示，其余的item隐藏

jQuery 效果

显示隐藏效果

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])


（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动效果

slideDown([speed,[easing],[fn]])【显示】
slideUp([speed,[easing],[fn]])【隐藏】
slideToggle([speed,[easing],[fn]])


（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次

事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它

动画队列及其停止排队方法

动W或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队:stop()

(1）stop() 方法用于停止动画或效果。

(2)  注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画

淡入淡出效果

fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])


（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

Gem__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery learn 01

jQuery概念：jQuery 是一个快速、简洁的 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。学习jQuery本质：就是学习调用这些函数（方法）。【方法()】简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。其设计的宗旨是“write L...
复制链接

扫一扫