jQuery基础

Posted 2020-08-17

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( 可以传个选择器进来)：获取到当前元素的兄弟元素