自学分享--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()返回距离左边的偏移