当前位置: 首页>前端>正文

带jquery的html项目完整迁移 html如何引入jquery

什么是jQuery

 

-----jQuery  是一个优秀的javascript框架,一个轻量级的JS库

-----兼容CSS3,以及各种浏览器

-----使用户更方便的出来HTML、Events、Dom实现动画效果,并且方便的为网站提供AJAX交互

-----使用户的HTML页面保持代码和HTML的内容分离

 

需要注意的是:jQuery 2.x 开始不支持Inrernet Explorer 6、7、8

 

 

jQuery的编程步骤

 

-----引入jQuery的js文件

-----使用选择器定位节点

-----调用方法操作节点

 

 

简单使用:

带jquery的html项目完整迁移 html如何引入jquery,带jquery的html项目完整迁移 html如何引入jquery_带jquery的html项目完整迁移,第1张

 

 

什么是jQuery对象

 

-----jQuery为了解决浏览器兼容问题而提供的一种统一封装后的对象描述

-----jQuery提供方法都是针对jQuery对象特有的,而且大部分的返回值也是jQuery对象,所以方法可以连缀调用

 

DOM对象--->jQuery对象

语法:$(dom对象)

 

jQuery对象--->DOM对象

语法:$obi.get(0)   将当前jQuery对象转换成dom数组,并获取第一个

 

带jquery的html项目完整迁移 html如何引入jquery,带jquery的html项目完整迁移 html如何引入jquery_选择器_02,第2张

 

 

 

选择器的种类

 

-----基本选择器

 

#id   特点快,尽量使用id选择器

语法:$("#id")

 

.class   根据class属性定位元素

语法:$(".class")

 

element  根据html标签

语法:$("element")

 

selector1,selector2    合并选择器的合集

语法:$("#id",".class","element")

 

 

-----层次选择器

 

selecr1  空格  select2     找到节点1后,再在节点1的子节点中寻找节点2

语法:$("#id  div")

 

select1  > select2      只查找到子节点,不查找间接子节点

语法:$("#id > div")

 

select1  + select2      下一个兄弟节点

语法:$("#id + div")

 

 

select1  ~ select2      下面所有兄弟节点

语法:$("#id + div")

 

 

-----过滤选择器

 

在已筛选出来的节点中过滤出需要的节点

 

”:“     开始或者      ”[ ]“

 

基本过滤选择器

:first   第一个元素

:last    最后一个元素

:not(selector) 把selector排除在外

:even   挑选偶数行

:odd   挑选奇数行

:eq(index) 下标等于index的元素

:gt(index) 下标大于index的元素

:lt(index)  小标小于index的元素

 

内容过滤选择器

:contains(text) 匹配包含给定文本的元素

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

:has(selector) 匹配含有选择器所匹配的元素

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

 

可见性过滤选择器

:hidden  匹配所有不可见元素,或type为hidden的元素

:visble  匹配所有的可见元素

 

属性过滤选择器

[attribute]               匹配具有attribute属性的元素

[attribute = value]   匹配属性等于value的元素

[attribute != value]  匹配属性不等于value的元素

 

子元素过滤选择器

:nith-child(index)   将为每一个父元素匹配子元素,index是从1开始的整数,表示对应的位置子元素

:eq(index) 匹配一个给定索引值的元素,index是从0开始的整数

 

 

jQuery操作DOM

 

-----查询

 

html()

text()

val()

attr()

 

-----创建、插入、删除

 

创建dom节点

语法:$(html)

例如:var  obj = $("<div>haha</div>")    返回的是一个obj的对象

 

插入dom节点  基本的

append()  做为最后一个子节点添加进来

prepend() 做为第一个子节点添加进来

after()       做为下一个兄弟节点添加进来

before()     做为上一个兄弟节点添加进来

 

删除dom节点

remove()  移除

remove(selector) 选择器定位后删除

empty()清空节点

 

 

-----复制

 

clone()

clone(true)   复制的节点也会具有行为(将处理代码一块复制)

 

-----样式操作

 

attr() 获取和设置属性

addclass()追加样式

removeClass()移除样式  有参数就移除参数名的,没参数移除所有样式

toggleClass()切换样式

hasClass()是否有某个样式

css()读取css的值

css(  ,)设置多个样式

 

 

-----遍历节点

 

children()/children(selector)只考虑直接子节点

next()/next(selector)下一个兄弟节点

prev()/prev(selector)上一个兄弟节点

siblings()/siblings(selector)其他兄弟

find(selector)查找满足选择器的所有后代

parent()父节点

 

 

 

 

 

 

 

 

 


https://www.xamrdz.com/web/2hj1963461.html

相关文章: