jQuery是一个JavaScript库
方便地处理HTML,事件,动画等处理
HTML:HTML文档中的DOM节点,如添加删除等
事件:通过jQuery对页面的时间进行处理
动画:通过jQuery实现淡入,淡出,滑动等动画
另外可以兼容很多浏览器。
引入jQ
<script src=“../../../vendeor/jquery-3.3.1.js”></script>
这个引入放到最下面不会影响加载堵塞。
或者使用CDN(内容分发网络,节点服务器就近)如bootCDN找到jQuery,把地址加入scr中
使用CDN除了不浪费我们自己服务器。也加快了用户下载速度。
$jQuery全局变量别名 window.jQuery === window.$
其他jQ的属性,方法,函数等等,都定义在jQuery全局变量内。
$.xxx 调用Jq本身的属性和方法
$(xxx) 调用Jq本身的一些选择,返回Jq对象,xxx是查询表达式,或者dom元素
$(domObject)->jQuery Object
$(xxx).get(0)->Dom Object
$(xxx)[0]->Dom Object
jQuery对象:原生Dom封装,和原生Dom不一样,他们之间相互转化,jQuery对象包含了很多方法,方便操作DOM元素
任何元素用$()包裹住就是jQuery对象
jQuery对线换成Dom对线只要get(0)
jQ可以使用链式语法.....,写起来爽,不用每一次Dom搜索。因为会返回jQuery对象
页面加载完毕$(document).ready(function(){...}) 判断dom元素加载完毕没有,不会等图片内容框架的加载。
我们需要页面加载完毕才执行
jQuery选择器,返回0,1或者多个jQ元素集合,被封装到类数组,jQuery对象集合或者jQuery元素集合
集合内元素顺序在页面上顺序一样
选择器:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
Dom对象,即Dom元素,就是浏览器网络页面渲染出来的元素
jQuery对象是也对一组,0,1,多个jQuery对象的包装
检测:DOMObject.nodeType
jQueryObject.jquery 返回版本号
如果不是就是都是undefined,就是看他的属性是啥
转换:var jqueryObj = $(domObj);
var domObj = jqueryObj.get([inde]);
创建HTML元素:例子 var div =$('<div>Hello</div>');返回一个jQ对象,这个jQ对象和我们从页面选择的jQ对象是一样的
但是页面中是没有的,通过appendTo放到页面上div.appendTo('body') 就是追加到Body最后
添加属性:var link1 = $('<a>',{
key1:value1,
key2:value2})
需要声明空元素,如果有元素就无效了
或者
var link2 = $('<a>哈哈<a>').attr({键值对})
一旦有jquery对象集合,无论是选择出来的,还是创建出来的,都可以对集合操作
$('xxx').length 当我们吧jQ对象转换成dom对象就要用判长
提取元素:[index]返回Dom元素 get([index])返回dom元素或者元素集合 不加返回全部
eq(index)返回jquery对象 可以不传,但是什么都不会返回
方法,first()和last()第一个元素和最后一个元素
toArray()jQ对象之间转换成Dom元素数组 和不加参数的get一样
jqqpi文档http://jquery.cuishifeng.cn/ 查阅文档
通过关系查找jQuery对象:var element = $('#info').parents();所有的parents
可以传参parents('div')
大多数选择器,不如jQ方法快
.children()
返回文本节点.contents()
find()最常用的方法之一 比如$('#box').find('p') 通过选择器删选后代元素
children([selector])和contents()直接子元素都可以加选择器参数,没有孙子一说
find(selector)包括儿子和孙子
parent(selector) 返回直接父元素
parents([selector]) 返回所有父元素
parentsUntil([selector]) 获取到某一个层级,就停住了
closest(selector)元素本身开始逐级向上,进行匹配,返回最近的匹配,会先检测当前元素是否匹配
next([selector]) nextAll([selector]) nextUntil([selector])
近邻同辈,下一个 后面所有,所有同辈 同辈直到匹配
prev([selector]) prevAll([selector]) prevUntil([selector])
往前查找 和next一样
siblings([selector]) 元素集合,往前往后都要 不包含本身 没有单数形式
add(selector)比如 $('.item1').add('.item2').add('item3')
还有重载方式,略
删除元素
.not(selector)过滤元素
.filter()删选出not的补集
has()保留特定后代
slice(start[,end])返回区间左闭又开
map(callback) 转换元素
将一个Jq对象换成另一个Jq对象
$('div').map(function(index,domElement){
return this.id;
})) ,返回三个字符串 就是id
可以返回null或者undefined选择返回那些
each(iterator)遍历 返回false就停止 break 返回true就是continue
is(selector)如果至少有一个元素符合给定参数,就返回true
end()回到最近的破坏性操作之前,任何对jQuery对象进行改变的操作 如果不是破坏性就是空对象
addBack([selector])进行破坏性操作,把原来的元素包含进来他就会让上一组的添加到dom中来
元素特性和属性:特性attributes 属性properties
特性都是字符串,属性字符串,布尔,数字,对象
特性:console.log(checkbox.getAttribute('tabindex'))
console.log(checkbox.tabIndex)
check这种比较特殊一般用属性,特性获取不到
特性和属性会动态链接:如果attribute本来就在DOM对象中就存在,那么特性和属性就会同步
如果本身在DOM对象存在,但是类型为Boolean就不会同步 属性是布尔,特性没有
如果不是DOM内建属性,就不会同步
图片的属性和特性 同步,但是不一样
操作元素的特性:attribute特性和property属性,都会被翻译成属性,不用特意区分。
获取特性的值:attr(name) 获取第一个元素
设置特性的值:attr(name,value) attr(attributes)就是比如img.attr({key1:value1,key2:value2....})
可以设置函数为值,可以加一些操作和判断
删除:removeAttr(name) 删除多个 用空格隔开
操作元素的属性:prop,和attr一样,我这里偷懒了o(╥﹏╥)o 布尔设置用prop 另外删除只能一个一个删
在元素中存取数据:data([name]) 不加,返回所有数据
设置数据的值:data(name,value) data(object)
删除removeData([data]) 删除多个用数组(data1 data2 data3)
判断是否有数据:jQuery.hasData(element) element是dom对象
修改元素样式
addClass(names)增加类 空格隔开
removeClass(names)移除类
hasClass(names) return 布尔值
toggleClass(names][,switch]) 切换某各类 switch表示是否切换 ture的时候切换
css(name,value) 逗号分隔 函数为value第一个参数index,第二个参数是value,当前的值 return就是返回的
获取的value是有单位的parseInt(value,10)就可以转换像素
没有value就是获取值 name可以是数组['height','width']这类
操作尺寸,和位置
width(value)
height(value)
获取到的是没有单位的,元素本身,不包括内边距,边框和外边距
innerHeight(value)
innerWidth(value)
outerWidth(value)
outerHeight(value)
inner包含内边距,不包含边框和外边距
outer包换内边距和边框,不一定包换边距
offset(coordinates)返回对象集合中第一个元素相对于文档(document)的偏移位置,返回对象包含了两个整形的属性top和left,只对可见元素有效
position()相对于父级元素的距离,如果找不到就是浏览器文档的距离
scrollLeft(value)
scrollTop(value) 相对滚动条的位置 不加value就是查看 加了就是设置
获取或者设置元素内容
html()
html(content) 设置和获取html的值
text()
text(content) 设置和获取文本
移动和插入元素
.append(content[,content,...,content]) 后面加
.prepend(content[,content,...,content]) 前面加
.before(content[,content,...,content]) 前面加(外部)
.after(content[,content,...,content]) 后面加(外部)
反方法.appenTo(target) .prepenTo(target) .insertBefore(target) .insertAfter(target)
wrap(wrapper) wrapAll(wrapper) wrapInner(wrapper) 把内容包裹进去
后面是标签或者是jq对象
remove([selector]) 移除元素,删除了绑定的数据和附加的事件
detach 和上面一样,保存了绑定的数据和附加的事件
empty() 元素的内容删掉,元素还要
复制元素
clone([Even[,deepEven]]) 第一个是否复制本身的事件和数据,第二个,后代也拖着跑
replaceWith(content)
replaceAll(target)
val() 设置值或者获取值