jQuery的基本调用
1、认识jQuery
1.1理解
不是框架,而是一个JS的一个函数库,可以极大的简化JS的编程
版本: 1.10.0
1大版本 .10小版本 .0小补丁 绝大部分浏览器
推荐插件库:
jquery Api: https://jquery.cuishifeng.cn/
字节跳动静态资源库:http://cdn.bytedance.com/
360 前端静态资源库:https://cdn.baomitu.com/
新浪云计算公共Js库:http://lib.sinaapp.com/
Staticfile CDN:http://www.staticfile.org/
1.2为什么还要学JQuery
小巧
代码简洁
性能高
插件多
1.3引入方式
第一步\必须引入jQuery函数库
//方式1\下载代码 然后通过相对地址引入
//方式2\直接引入在线地址(CDN)第二步\再编写自己的js代码
1.4语法
顶层对象
jQuery === window.jQuery === window.$ ===$使用
$.方法名()
$(选择器).方法名()
2.选择器
2.1css选择器
$(’#id’)根据给定的ID匹配一个元素。
$(‘a’)根据给定的元素标签名匹配所有元素
$(’.class ‘)根据给定的css类名匹配元素。
*匹配所有元素
$(’.a .b’)将每一个选择器匹配到的元素合并后一起返回。
$(’.a:hover’)
2.2自定义的选择器
$(‘li:even’)选中偶数行li,从0开始
$( 'li:odd ')选中奇数行li
$( ‘li:eq(5)’)选中第5个li
$( ‘li:gt(5)’)选中大于5的li
$( ‘li:lt(5)’)选中小于5的li
$(‘div:has§’)选中包含p的div(所有的后代只要有p就会被选中)
$(‘div:contains(“我”)’)选中包含指定文本的元素
3.集合
$(选择器).parent()
选中父元素
$(选择器).parrents()
返回指定元素的组先级元素.
$(选择器).children()
返回指定元素所有的子元素
$(选择器).next()
返回指定元素的下一个兄弟元素
$(选择器).prev()
上一个兄弟元素
$(选择器).prevAll()
选中之前所有的兄弟元素
$(选择器).siblings()
选中所有的兄弟元素
$(选择器).first()
选中第一个子元素
$(选择器).last()
最后一个
$(选择器).eq(n)
返回指定元素
$(选择器).find();
在 子元素中寻找符合条件的集合 子元素被选中
$(选择器).filter();
在选中的元素中寻找 选中的元素内选中
$(选择器).is();
判断选中的元素是否符合条件,返回的是一个 布尔值
$(选择器).has();
拥有特定的后代元素
4、JS对象与jQuery对象
如果是通过JS获取的元素,那就应该使用JS方法进行处理;
如果是通过 jQuery 获取的元素,那就需要使用 jQuery的方法处理。
JS对象转jQuery 对象
$(原生对象)
$(this)jQuery 对象转jS对象
$(‘li’)[0].style
变为js对象
$('li).get(0)//变为了js对象
5.jQuery链式写法
jQuery允许在相同元素上同时调用多个方法.
例:
$(this).toggleClass(‘current’).next().toggle()
6.DOM操作
6.1节点的创建
$('<li></li>')
$('<li>文本</li>')
$('<li class="a">文本</li>')
6.2插入节点
father.append(child)追加
child.appendTo(father) 与 append效果一致,只是父子位置对调
father.prepend(child)在最前面添加
child.prependTo(father) 与 prepend效果一致,只是父子位置对调
brother.after(新节点)在匹配元素之后插入
brother.before(新节点)在匹配元素之前
6.3.删除节点
target.remove() 移除节点
target.datach() 移除后,再添加进来,原来的事件会被保留
empty() 清空子节点
6.4节点复制
clone(布尔值)
被替换节点.replaceWith(新节点);
例:
var p=$('<p>新节点</p>')
$( '#list').replacewith(p)
新节点.replaceAll(被替换节点)
wrap() 把匹配的元素用其他结构包起来
6.5文本操作
html()等同innerHTML
text()等同于innerText
val()等同于.value
6.6操作属性的方法
.prop() 获取或者设置元素固有的属性
$('img).prop(‘src’);
.attr()获取或者设置元素的自定义属性
$(‘img’).attr(‘index’, 2);
移除:
.removeProp()
.removeAttr();
6.7css处理
单个css处理
$().css(属性名,属性值)
同时设置多个css
$().css({
属性1:属性值,
属性2:属性值
})
6.8 class处理
addClass()添加类名
removeClass()移除类名
toggleClasss() 切换class类名效果
6.9元素大小
width() / height()获取/设置宽高
innerWidth() innerHeight()宽高(padding)
outerWidth() outerHeight()宽高(包含padding、border)
outWidthth(true) outerHeight(ture) (包含padding\border\margin)
6.10 元素位置
offset()返回元素在当前视口的偏移,返回值是对象,包含 top、left两个属性。
position()返回相对父元素的偏移,返回值是对象,包含 top、left 两个属性。
scrollTop()返回距离顶部的偏移
scrollLeft()返回距离左边的偏移