javascript第十七天jqurey初识

Jquery的初识

jQuery的定义

(1) jQuery是一个优秀的javascript库。是由John Resig创建于2006年1月的开源项目。

(2) Write less do more

(3) jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。

jQuery的优势

(1) 在jQuery的2.0版本之前所有的版本都包含兼容处理，没有兼容性问题，但在2.0之后，jQuery就不处理兼容性问题了。

(2) 链式操作方式（链式编程）：jQuery对象.方法1().方法2().方法3().....

(3) 隐式迭代（循环）：在jQuery中，我们批量获取的元素可以直接添加事件不需要循环，循环的任务由jQuery隐式完成。

jQuery的引入

(1) 本地引入：将jQuery的js文件下载到本地并引入

(2) 线上引入：直接在script标签中的src属性中写入jQuery文件的网络地址

① https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js

jQuery的入口函数

(1) 我们要编写jQuery的代码就必须先写入口函数

(2) jQuery入口函数可以防止顶级变量的污染

(3) 入口函数的写法：

① jQuery(document).ready(function(){ jquery代码 })

② 在这里jQuery可以简写为$ $(document).ready(function(){ jquery代码 })

③ 在jquery代码中 jQuery 和 $ 是完全等价的

④ jQuery入口函数的简写形式：$(function(){ jQuery代码 })

(4) jQuery的入口函数会在页面html结构和 css样式加载完之后立即执行

jQuery对象和dom对象的区别

(1) jQuery也可以使用自己的选择器获取页面内的元素通过jQuery选择器获取到的元素对象被称为 jQuery对象

(2) jQuery对象和 dom对象有本质区别

① jQuery(“.类名/#id/标签名”) / $(“.类名/#id/标签名”)

② Jquery对象可以进行隐式迭代 dom对象不行

③ jQuery对象只能使用jQuery的方法，dom对象也只能使用Dom的方法

jQuery对象和dom对象的互转

(1) jQuery对象 ----> dom对象

① 由于jQuery对象是一个伪数组，伪数组中的数组项就是dom对象，因此转换方式为 jQuery对象[idx] 就是具体的dom对象

(2) Dom对象 ----> jquery对象

① $/jQuery(要转换的dom元素)

jQuery的具体用法

(1) jQuery的选择器

① jQuery的基础选择器

1) 标签选择器：$/jQuery(‘标签名’)

2) 类名选择器：$/jQuery(‘.类名’)

3) Id选择器：$/jQuery(‘#id’)

② jQuery的层级选择器

1) 子代选择器

2) 后代选择器

3) 下一个兄弟选择器 $(“a+b”) 获取的是a元素后紧跟的元素

4) 获取后续所有兄弟元素 $(“a~b”) 获取的是a元素后所有b元素

③ jQuery的过滤选择器

1) 基本过滤选择器

$(“选择器:first”) 获取一个元素中的第一个子元素
$(“选择器:last”) 获取最后一个子元素
$(“选择器:not(满足的条件)”) 反向选择，选择不满足指定条件的元素
$('li:even')：获取索引为偶数的li元素
$('li:odd')：获取索引为奇数的li元素
$(‘li:eq(idx)’) 获取指定下标的li
$(‘li:lt(idx)’) 获取下标小于指定下标的元素
$(‘li:gt(idx)’) 获取下标大于指定下标的元素

2) 内容过滤选择器

contains：$(li:contains（指定的文本内容）)
has：$(‘li:has(指定标签名)’)
empty：$(‘li:empty’)

3) 可见性过滤选择器

visible：$(‘li:visible’) 获取显示的li
hidden：$(‘li:hidden’) 获取隐藏的li

4) 属性过滤选择器

[属性名] $(‘li[属性名]’)
[属性名=属性值] $(‘li[属性名=属性值]’)
[属性名^=属性值] $(‘li[属性名^=属性值]’)
[属性名$=属性值] $(‘li[属性名$=属性值]’)
[属性名*=属性值] $(‘li[属性名*=属性值]’)

5) 子元素过滤选择器

:first-child
:last-child
:nth-child

6) 表单对象过滤选择器

:disabled 获取禁用的表单元素
:enabled 获取未禁用的表单元素
:checked 获取被勾选的表单元素
:selected 获取被选中的下拉列表项

7) 表单过滤选择器

：text $(‘:text’) 获取到所有文本输入框
：password
：checkbox
：radio
：submit
：button
：reset
：file
：input 获取到所有的表单元素

(2) 遍历节点

① 遍历兄弟节点

1) Next：获取下一个兄弟元素

2) nextAll：获取后面所有兄弟元素

3) Prev：获取前一个兄弟元素

4) prevAll：获取前面所有兄弟元素

5) Siblings：获取所有兄弟元素

② 遍历父节点

1) Parent 获取直接父元素

2) Parents 获取当前元素的所有父元素，一直到html

③ 过滤遍历节点

1) Find：父元素.find(“选择器”) 按照选择器的条件在父元素中获取满足条件的子元素

2) Filter：元素.filter(“选择器”) 按照选择器的条件在所有元素中筛选满足条件的元素

3) Not：元素.not(‘选择器’) 按照选择器的条件在所有元素中筛选不满足条件的元素

(3) jQuery操作属性

① 原生js中操作元素属性的方法

1) 元素.属性名

2) 元素.getAttribute(“属性名”) 元素.setAttribute(“属性名”,”属性值”)

② Attr

1) 用法：

获取：jQuery元素.attr(“属性名”)
设置：jQuery元素.attr(“属性名”,”属性值”)

③ Prop

1) 用法：

获取：jQuery元素.prop(‘属性名’)
设置：jQuery元素.prop(“属性名”,”属性值”)

④ Attr和prop的使用环境

1) 普通属性操作用attr 表单元素的属性操作用prop

(4) jQuery操作类名

① addClass

② removeClass

③ toggleClass

④ hasClass

(5) jQuery操作样式

① Css

1) 设置：元素.css(“样式属性名”,”样式属性值”)

2) 获取：元素.css(“样式属性名”)

3) 批量设置：元素.css({样式属性名1：属性值 , 样式属性名2：属性值,.....})

4) 批量获取：元素.css([“样式属性名1” , ”样式属性名2” , ......])

(6) jQuery操作元素内容

① Html：

1) 获取：元素.html();

2) 设置：元素.html(要设置的html内容)

② Text

1) 获取：元素.text();

2) 设置：元素.text(要设置的文本内容)

③ Val

1) 获取：元素.val();

2) 设置：元素.val(要设置的value内容)

jQuery的方法

(1) jQuery函数的each方法

① 作用：用来循环数组和对象的

② 用法：$.each(要循环的数组/对象，function(idx,item){})

1) 如果循环的是数组 idx：下标 item：数组项

2) 如果循环的是对象 idx：属性名 item：属性值

(2) jQuery对象的each方法

① 作用：用来循环jQuery对象的

② 用法：jQuery对象.each(function(idx,item){})

1) Idx:下标

2) Item:dom元素

(3) jQuery的extend方法

posted @ 2020-10-09 19:12 默默的1 阅读(178) 评论(0) 收藏举报

刷新页面返回顶部

javascript第十七天jqurey初识

公告