jQuery学习笔记01

2020-04-08

1、jQuery介绍

1.1什么是jQuery ?

jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

1.2 jQuery核心思想

它的核心思想是write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

 

1.3 jQuery流行程度

jQuery现在已经成为最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery好处

jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

 

 

2、jQuery举例

2.1需求:使用jQuery给一个按钮绑定单击事件?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      // window.onload = function () {
      //     var btnObj = document.getElementById("btnId");
      //     // alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom
对象
     
//     btnObj.onclick = function () {
      //        alert("js
原生的单击事件");
      //     }
      // }

     
$(function () { // 表示页面加载完成 之后,相当 window.onload = function () {}
        
var $btnObj = $("#btnId"); // 表示按id查询标签对象
        
$btnObj.click(function () { // 绑定单击事件
           
alert("jQuery 的单击事件");
         });
      });

   </script>
</head>
<body>

   <button id="btnId">SayHello</button>

</body>
</html>

 

2.2 jQuery常见问题

1.使用jQuery一定要引入jQuery库吗?

答案:是,必须

2.jQuery中的$到底是什么?

答案:它是一个函数

3.怎么为按钮添加点击响应函数的?

答案:1、使用jQuery查询到标签对象

2、使用标签对象.click( function(){} );

 

3、jQuery核心函数

$ 是jQuery的核心函数,能完成jQuery的很多功能。$()就是调用$这个函数

1、传入参数为[ 函数 ] 时:表示页面加载完成之后。

相当于window.onload = function(){}      

2、传入参数为  [ HTML 字符串 ] 时: 会创建这个html标签对象

3、传入参数为  [ 选择器字符串 ] 时:

$(“#id属性值”);

id选择器,根据id查询标签对象

$(“标签名”);

标签名选择器,根据指定的标签名查询标签对象

$(“.class属性值”);  

类型选择器,可以根据class属性查询标签对象

 

4、传入参数为  [ DOM对象 ] 时:会把这个dom对象转换为jQuery对象

 

4、jQuery对象和DOM对象区分

4.1、什么是jQuery对象,什么是DOM对象

 

Dom对象

1.通过getElementById()查询出来的标签对象是Dom对象

2.通过getElementsByName()查询出来的标签对象是Dom对象

3.通过getElementsByTagName()查询出来的标签对象是Dom对象

4.通过createElement() 方法创建的对象,是Dom对象

注意:DOM对象Alert出来的效果是:[object HTML标签名Element]

 

jQuery对象                                                                            

1.通过JQuery提供的API创建的对象,是JQuery对象

2.通过JQuery包装的Dom对象,也是JQuery对象

3.通过JQuery提供的API查询到的对象,是JQuery对象

注意:jQuery对象Alert出来的效果是:[object  Object]

 

4.2、问题:jQuery对象的本质是什么?

jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数的组合。

4.3、jQuery对象和DOM对象使用区别

jQuery对象不能使用DOM对象的属性和方法,DOM对象也不能使用jQuery对象的属性和方法

4.4、DOM对象和jQuery对象互转

DOM对象转化为jQuery对象(*重点)

1、先有DOM对象

2$( DOM对象 ) 就可以转换成为 jQuery对象

 

jQuery对象转为DOM对象(*重点)

1、先有jQuery对象

2jQuery对象[下标]取出相应的DOM对象

           

 

 

 

        

 

 

 

 

 

 

5、jQuery选择器(重点)

5.1、基本选择器(重点)

 

 

 

#ID          选择器

根据id查找标签对象

.class       选择器

根据class查找标签对象

element   选择器

根据标签名查找标签对象

*          选择器

表示任意的,所有的元素

selector1selector2 组合选择器

合并选择器1,选择器2的结果并返回

 

 

p.myClass

表示标签名必须是p标签,而且class类型还要是myClass

5.2、层级选择器(重点)

 

 

Ancestor descendant

后代选择器       :在给定的祖先元素下匹配所有的后代元素

parent > child

子元素选择器:在给定的父元素下匹配所有的子元素

prev + next

相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings

之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

 

 

 

5.3、过滤选择器

基本过滤器:

 

 

:first

      获取第一个元素

:last             

获取最后一个元素

:not(selector)           

去除所有与给定选择器匹配的元素

:even    

匹配所有索引值为偶数的元素,从 0 开始计数

:odd             

匹配所有索引值为奇数的元素,从 0 开始计数

:eq(index)   

匹配一个给定索引值的元素

:gt(index)          

匹配所有大于给定索引值的元素

:lt(index)    

匹配所有小于给定索引值的元素

:header

匹配如 h1, h2, h3之类的标题元素

:animated   

匹配所有正在执行动画效果的元素

:focus

触发每一个匹配元素的focus事件。

 

内容过滤器:

 

 

 

:contains(text)  

匹配包含给定文本的元素

:empty

匹配所有不包含子元素或者文本的空元素

:has(selector) 

匹配含有子元素或者文本的元素

:parent 

匹配含有选择器所匹配的元素的元素

 

属性过滤器:

 

[attribute]

匹配包含给定属性的元素

[attribute=value]

匹配给定的属性是某个特定值的元素

[attribute!=value]

匹配所有不含有指定的属性,或者属性不等于特定值的元素

[attribute^=value]

匹配给定的属性是以某些值开始的元素

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

[attribute*=value]

匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN]

复合属性选择器,需要同时满足多个条件时使用。

表单过滤器:

 

:input   

匹配所有 input, textarea, select button 元素

:text            

匹配所有文本输入框

:password

匹配所有的密码输入框

:radio   

匹配所有的单选框

:checkbox

匹配所有的复选框

:submit 

匹配所有提交按钮

:image

匹配所有img标签

:reset

匹配所有重置按钮

:button

匹配所有input type=button <button>按钮

:file      

匹配所有input type=file文件上传

:hidden 

匹配所有不可见元素display:none input type=hidden

 

 

 

表单对象属性过滤器:

 

:enabled      

匹配所有可用元素

:disabled     

匹配所有不可用元素

:checked     

匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

:selected     

匹配所有选中的option元素

 

6、jQuery元素筛选

过滤筛选:

 

eq()      

获取给定索引的元素

功能跟 :eq()  一样

first()

获取第一个元素     

功能跟 :first  一样

last()

获取最后一个元素

功能跟 :last  一样

filter(exp)

留下匹配的元素

 

is(exp)

判断是否匹配给定的选择器,只要有一个匹配就返回,true

 

map(callback)

将一组元素转换成其他数组(不论是否是元素数组)

 

has(exp)

返回包含有匹配选择器的元素的元素

功能跟 :has 一样

not(exp)      

删除匹配选择器的元素

功能跟 :not 一样

slice(start,[end])

选取一个匹配的子集

功能与原来的slice方法类似

查找筛选:

 

children(exp)

返回匹配给定选择器的子元素

功能跟 parent>child一样

closest(exp)

从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素

 

find(exp)     

返回匹配给定选择器的后代元素

功能跟 ancestor descendant 一样

next()

返回当前元素的下一个兄弟元素      

功能跟 prev + next 功能一样

nextAll()     

返回当前元素后面所有的兄弟元素  

功能跟 prev ~ siblings 功能一样

nextUntil()

返回当前元素到指定匹配的元素为止的后面元素

 

offsetParent()

返回第一个匹配元素用于定位的父节点。

 

parent()      

取得一个包含着所有匹配元素的唯一父元素的元素集合。

 

parents(exp)

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)

 

prev(exp)    

返回当前元素的上一个兄弟元素

 

prevAll()

返回当前元素前面所有的兄弟元素

 

prevUnit(exp)      

返回当前元素到指定匹配的元素为止的前面元素

 

siblings(exp)

返回所有兄弟元素

 

 

串联筛选:

 

add(exp)

把与表达式匹配的元素添加到jQuery对象中

andSelf()

加入先前所选的加入当前元素中

contents()

查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

end()

回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态