jQuery学习笔记01

时间：2022-05-16 16:04:55

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对象

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

           

 

 

 

        

5、jQuery选择器（重点）

5.1、基本选择器（重点）

#ID          选择器

根据id查找标签对象

.class       选择器

根据class查找标签对象

element   选择器

根据标签名查找标签对象

*          选择器

表示任意的，所有的元素

selector1，selector2 组合选择器

合并选择器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()

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

相关文章