当前位置: 首页 > Web前端 > CSS

前端基础入门五(掌握jQuery常用api实现动效)

时间:2023-03-30 17:25:20 CSS

jQuery基本概念学习目标:学习jQuery的使用,掌握jQuery常用api,能够使用jQuery实现常用效果。为什么要学习jQuery?[01-让div显示并设置content.html]使用javascript开发过程中有很多缺点:1、查找元素的方式太少,比较麻烦。2.遍历伪数组比较麻烦,通常会嵌套很多for循环。3.存在兼容性问题。4.实现简单的动画效果很麻烦。5.冗余代码。jQuery初体验【02-让div显示并设置content.html】$(document).ready(function(){$("#btn1").click(function(){//隐式迭代:偷偷遍历,InjQuery,不需要手动写for循环,会自动遍历$("div").show(200);});$("#btn2").click(function(){$("div").text("我很满意");});});优点总结:1.查找元素的方式多种多样,非常灵活2.具有隐式迭代特性,无需手写for循环。3.完全没有兼容性问题。4.实现动画非常简单,功能更强大。5.代码简单粗暴。什么是jQuery?jQuery的官网http://jquery.com/jQuery是一个js库。使用jQuery比使用JavaScript更容易。js库:将一些常用的方法写成一个单独的js文件,使用时直接引用js文件。(animate.js,common.js)我们知道jQuery其实就是一个js文件,里面封装了很多方法,方便我们开发。它其实是common.js的增强版,所以我们在学习jQuery的时候,其实就是学习了很多封装在jQuery的js文件中的方法。jQuery的入口函数使用jQuery的三个步骤:1.导入jQuery文件2.入口函数3.函数实现关于jQuery的入口函数://第一种写法$(document).ready(function(){});//第二种写法$(function(){});jQuery入口函数和js入口函数的比较1.JavaScript入口函数直到页面中的所有资源(包括图片和文件)都加载完毕后才开始执行。2、jQuery的入口函数只会等待文档树加载完成后才开始执行,不会等待图片和文件加载完成。jQuery对象和DOM对象的区别(重点)DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。jQuery对象:jQuery对象是使用jQuery方法获取页面中的元素,返回的对象就是jQuery对象。jQuery对象实际上是DOM对象的一个??包装集(包装DOM对象的集合(伪数组))。DOM对象和jQuery对象的方法不能混用。将DOM对象转换为jQuery对象:[联想记忆:花钱]var$obj=$(domObj);//$(document).ready(function(){});是典型的DOM对象到jQuery对象jQuery对象转换成为DOM对象:var$li=$("li");//第一种方法(推荐)$li[0]//第二种方法$li.get(0)selector什么是jQuery选择器jQuery选择器是jQuery提供的一组方法,方便我们获取页面上的元素。注意:jQuery选择器返回jQuery对象。jQuery选择器有很多,基本上兼容从CSS1到CSS3的所有选择器,而且jQuery还增加了很多更复杂的选择器。[查看jQuery文档]虽然jQuery的选择器有很多,但是选择器是可以相互替换的。也就是说,你可以通过多种方式获取一个元素。所以我们真正能用到的只有几个最常用的选择器。基本选择器总结:和css选择器用法完全一样。分层选择器与CSS选择器完全相同。过滤器选择器过滤器选择器(方法)