jQuery基础+复习(1),10分钟捡起你渐忘的jQuery

最新推荐文章于 2024-08-06 18:49:35 发布

zhutubao

最新推荐文章于 2024-08-06 18:49:35 发布

阅读量193

点赞数

文章标签： javascript jquery

原文链接：https://www.cnblogs.com/Jim-Wang/p/11938773.html

版权

jQuery基础+复习(1)

jQuery忘得太快了，特此做一期简单的复习，嗯，就这样。
jQuery要小写j大写Q；

一，概念

jQuery是一个简洁的,快速的JavaScript库。
（封装好的，直接拿来用，节省效率加时间）
jQuery说：write Less，Do More

二，优点

轻量级。（不影响加载速度）
链式编程、隐式迭代（用不上for憨憨）
跨浏览器兼容。（在哪都可以用）
官网
官网做的很实用：https://jquery.com/

三，使用

下载-》引入-》使用

四，入口函数

到现在我也不是很清楚入口函数，，，，
自我理解：等待DOM加载完执行的函数：
举例：

<body>

<script>   //js 写在了div上面,正常读不到div
(document).ready(function () {
 console.log($('div'));    
  })      
        
//利用入口函数,等待body执行完,再执行,就读到啦
</script>

<div>div</div>

</body>

入口函数两种写法:

$(function () {
      //此处为你需要后执行的代码
}) ;

$(document).ready(function(){
   ...  //此处为你需要后执行的代码
});

可以理解记忆的两段代码，入口函数等待DOM结构渲染完毕既可执行，（渲染引擎，chrome浏览器的渲染引擎Blink）不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
好吧，我还不是很懂这函数有什么蛋用
不同于原生 js 中的 load 事件是等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
好像有些懂了，，

五，基本使用

1,顶级对象：$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法

2,看到$能想到什么??

jQuery,php,ES6字符串模板.

3,jQuery 对象和 DOM 对象

主要就是区分jQuery和DOM对象的属性和方法
用原生 JS 获取来的对象就是 DOM 对象【document.getElement等方法】
jQuery 方法获取的元素就是 jQuery 对象【$(‘div’)等】

var div = document.querySelector('div');   
 div.style.background = 'yellow';       //  dom  div 点出来 属性          js 只能 js 
$('div').css('background' , 'blue');    //jquery.css 要赋值

4,jQuery和js相互转换

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
DOM 对象转换为 jQuery 对象： $(DOM对象)
jQuery 对象转换为 DOM 对象（两种方式）
$(‘div’) [index] index 是索引号
$(‘div’) .get(index) index 是索引号
无非是把jQuery取到的伪数组取到具体的值…

5,jQuery选择器

$(’#id’)---->指定id元素
$(’*’)---->所有元素
$(’.class’)---->指定class元素
$(‘div’)---->根据标签获取元素
$(‘div,p,li’)---->获取多个
$(‘li.class’)---->交集获取
$(‘ul>li’)---->子代
$(‘ul li’)---->后代
点class井id是不是jQuery传出来的

6,隐式迭代

<script>
    // $('ul li').css('background','pink');       类比  jq  做的 遍历
    var liArr = document.querySelectorAll('ul li');      //类比js做的遍历
    for(var i = 0 ; i < liArr.length ; i++){
            liArr[i].style.background = 'orange';   
             }
</script>

过去的js遍历,jQuery直接就可以实现

7,jQuery筛选选择器

$(‘li:first’)：第一个元素
$(‘li:last’)：最后一个元素
$(‘li:eq(2)’):索引为2【查找指定索引的元素】
$(‘li:odd’):索引为奇数
$(‘li:even’):索引为偶数
注意：索引是从0开始的

8,jQuery 筛选方法

$(‘li’).parent()父级
$(‘ul’).children(‘li’);子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
$(‘ul’).find(‘li’)后代
$(‘li’).siblings(‘li’)兄弟
$(‘li’).nextAll();后面的
$(‘li’).prevAll();前面的判断是否具有某个类名：
$(‘div’).hasClass(‘aaa’)
$(‘div’).eq(index);指定索引方法【eq推荐用方法】

9,链式编程

按钮变色问题

$(this).css('color', 'red').sibling().css('color', '');

一行代码实现,取值,赋值,多元素操作.

六,jQuery 样式操作

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类
添加类【$ (“div”).addClass(’‘current’’);】
移除类【$ (“div”).removeClass(’‘current’’);】
切换类【$ (“div”).toggleClass(’‘current’’);】
注:
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

七,jQuery效果

1,显示隐藏效果

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: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2,滑动效果

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
注:
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

3,淡入淡出效果

fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]]) 自己控制透明度
【注意fadeTo必须写两个参数，speed和opacity】

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

4,自定义动画

语法：animate(params,[speed],[easing],[fn])
参数：
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一
容易理解也很简单但忘得太快了.

八,尾

转载链接:https://www.cnblogs.com/Jim-Wang/p/11938773.html
原著好的一匹,文章是自己精简之后的.

zhutubao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础+复习(1),10分钟捡起你渐忘的jQuery

jQuery复习jQuery忘得太快了，特此做一期简单的复习，嗯，就这样。jQuery要小写j大写Q；一，概念jQuery是一个简洁的,快速的JavaScript库。（封装好的，直接拿来用，节省效率加时间）jQuery说：write Less，Do More二，优点轻量级。（不影响加载速度）链式编程、隐式迭代（用不上for憨憨）跨浏览器兼容。（在哪都可以用）官网官网...
复制链接

扫一扫