首页 > 代码库 > jQuery基础

jQuery基础

2024-08-19 14:00:40   220人阅读

1.js存在的问题
window.onload( ),这个函数事件存在事件覆盖的问题
部分存在兼容的问题
代码冗余 过程繁琐
代码的容错性低（上边有错，下边的代码不会执行）
实现动画效果繁琐
 
2.什么是jQuary
就是js的类库，实现了平时开发中常用的功能。方便调用，提高开发效率
这个库，就是JS文件。它吧功能封装到一个文件，将来使用直接拿过来使用即可！
其实jQ就是跟animate一样，都是一个库，只不过我们实现的功能不够强大
 
3.基本使用
①引入jQuary文件
②入口函数 $（document）.ready(function(){ ① } );
③实现功能代码 例：①$("#btn").click(function(){ //不带on
$("div").text("好哦")//获取所有的div并设置内容
})
 
4.主要学习的内容
主要学习类库中提供的一系列方法（API）
几乎所有的操作都是方法，一定要带（）来 调用方法；
jQuary三个版本的说明：v1.xxx 兼容性 行非常的好 ，能够兼容到IE6-8（文件大）
v2.xxx v3.xxx兼容性是IE9+（文件小，更利于在移动端使用 ，如果再想使用这些功能，就去jQuary官网找到这些功能即可）
min是带压缩的！！！让 JS文件变的更小，让网站在更短的时
间加载出来
同版本的文件，平时开发时就大一点的，项目上线时一定用min。
 
5. 在使用之前先引用jQ文件，然后再去使用，不要先使用jQ代码，再引用文件
入口函数的两种方式
$（document）.ready(function(){ ① } );//文档有没有准备好 $函数里的返回值可以来调用ready方法
window.onload=function(){ }//类似
$(function(){ ②}) //作用和①都是相同的
作用： 等页面加载完成了，在执行事件处理程序中的代码，和window.onload是有区别的
 
6.
7. $是什么？
就是一个函数
$和jQuery的作用一样，也能够引用整个jQuary库 函数本身也是对象 区分大小写
 
8.jQuery和DOM对象的区别
DOM对象相对于衣服，一件一件的洗，一个一个的操作
jQuery相当于洗衣机 里边有一系列的DOM对象和许多方法 一次性操作多个
DOM： 通过DOM提供的API，获取到的元素对象就是DOM对象 具有一系列的属性和方法
jQuery： 通过 jQuery获取元素的方法，获取的对象就是 jQuery对象 例：show( ) text( )
jQuery对象不能使用DOM对象中的方法，DOM对象不能使用 jQuery的方法
 
9. jQuery转换成DOM对象
var $dv=$("div");
var dv=$dv[0] //这样就把对象取出来了
jQuery对象中就是一个一个的DOM 对象（从洗衣机中取衣服）
 
DOM如何转换成 jQuery对象
$(里边是DOM对象) var $dv1=$(dv),将DOM当成参数传给$( )
 
10.
jQ选择器，就是jQ中提供的用来获取DOM元素的一些字符串，配合$（）来
获取元素。
基本选择器：
id(能用id的就用id) $("#cc").css("属性名称"，“属性值”)
标签选择器：$("li").css("",""); 匹配页面中指定标签名的元素
类选择器：$(".li")
通配符选择器：$("*") 所有的从上往下所有的元素（尽量少用）
并集选择器：$("li","p") 匹配以逗号分隔的多个选择器
交集选择器：$("p.hot")
层级选择器：
子代选择器：$("#cc>li") 获取父元素中的直接 子元素【里边的可以是标签，类。。。】
后代选择器：$(" ")包含所有的后代元素
方法：
children( )用来获取jQ对象的子代元素，这个方法还可以传入一个参数（一般是基本选择器）
事件：
mouseenter( ); mouseleave( );
选择器都是字符串，而this是对象啊
 
过滤选择器：
：odd 奇数行选择器 配合其他的选择器来使用 $("li:odd")
: even 偶数行选择器 索引号为偶数的
: eq(index) 选择指定索引号的元素 $("li:eq(6)")
:il(index)
:gt(index)
 
属性选择器：
li[id]: li中只要有id属性就被 找出来
[属性名^="属性中包含的字符"]
 
 
方法：
find(选择器 )获取当前对象的后代元素， 后代选择器相同
children( )这里的参数可以省略
siblings( 可以传个选择器进来)：获取到当前元素的兄弟元素
 
 
 
 
 
 
 

jQuery基础


联系
我们