jQuery
改变jq符号:
//从此zz就代表$
let zz = $.onConflict()
网页加载
1.网页里所有资源加载完成:
$(()=>{})//可以走很多遍
window.onload = ()=>{}//只走一遍
2.网页中DOM结构加载完成:
window.addEventListenter('DOMContentLoaded',()=>{})
选择器
基础语法:$(seiector).action()
1.基本选择器:
标签、类、id、并集、交集、全局、$(’*’)
2.层次选择器:
后代(空格)、子代(>)、第一个兄弟(+)、所有兄弟元素(~)
3.属性选择器:
- $(’[class]’)
- $(’[class=hot]’)
- $(’[class!=hot]’)
- $(“a[herf ^= ‘www’]”)
4.基本过滤选择器:
- :frist(css3中: :first-child)
选第一个元素
例:
$('li:frist')
- :last(css3中: :last-child)
选最后一个元素 - :not()
除去写进去的元素 - :even
选索引为偶的元素 - :odd
选索引为奇的元素 - :eq(1)
选索引=1的元素 - :eq(1)
选索引=1的元素 - :gt(1)
选索引>1的元素 - :lt(1)
选索引<1的元素 - :header
所有标题元素 - :focus
选取当前获取焦点的元素
5.基本过滤方法:
- filter(‘a’)
选出a的元素 - not(‘a’)
选出除去a的元素 - has(‘a’)
选出包含a的元素
6.index()索引,当前元素在所有兄弟元素的位置,从0开始。
特殊符号的转义:
<id = 'id#a'> $('#id\\a')
<id = 'id[2]'> $('#id\\[2\\]')
class操作:
- addClass
添加class - removeClass
删除class - toggleClass
有则删除class,无则添加class - hasClass
有返回true,无返回false
内容操作:
- html()
获取或设置内容(相当于js中的innerHtml) - text()
获取或设置不含标签的内容(相当于js中的innerText) - val()
获取或设置值(适用于表单元素)
属性操作:
- css(‘color’);//获取属性
- attr(‘data-age’);//获取或设置自定义属性
- data();//获取或设置自定义属性
- $(’[data-age]’).html();//获取自定义属性
- prop();//获取或设置原生属性
// 给jquery扩展的实例方法
$.fn.extend({
red(){
this.css('color','red')
},
dian(){ //大于10位数按......显示
let str = this.html()
if(str.length >10) {
let result = ''
result = str.slice(0,10) + '......'
this.html(result)
}
}
})
// 给jquery扩展静态方法
$.extend({
yellow() {
console.log('yellow')
}
})
$('.demo').dian()
$('.demo').red()
$.yellow()
$('.demo').css('color');//获取属性
$('.demo').attr('data-age');//获取自定义属性
$('.demo').data('age');//获取自定义属性
$('.demo').data();//获取自定义属性
$('[data-age]').html();//获取自定义属性
$().attr('data-a',10)//获取或设置自定义属性
$().prop('checked')//获取或设置原生属性
DOM节点操作
- 创建节点:
$('<div></div>')
$('<h1></h1>')
-
添加节点:
1、内部添加:
$(a).append(b)把b添加到a里的末尾
$(a).appendTo(b)把a添加到b里的末尾
$(a).prepend(b)把b添加到a里的开头
$(a).prependTo(b)把a添加到b里的开头2、外部添加:
$(a).insertBefore(b)把a添加到b外的前
$(a).insertAfter(b)把a添加到b外的后
$(a).before(b)把b添加到a外的前
$(a).after(b)把b添加到a外的后 -
删除节点
remove() 删除整个节点,不保留元素的绑定事件
detach() 删除整个节点,保留元素的绑定事件
empty() 清空节点内容 -
替换节点
$(a).replaceWith(b) 把a节点替换为b节点
$(a).replaceAll(b) 把b节点替换为a节点 -
复制节点
clone(boolean) 当boolean为true时复制事件处理,为false时不复制事件处理 -
查找节点
find() 查找子节点
child() 查找子代节点 -
绑定事件
<button class="btn">add</button>
$('.btn').click(function(){
$('body').append(`<button class="btn">add</button>`)
}) //添加出来的节点并没有继承原来的方法
$(document).on('click','.btn',function(){
$('body').append(`<button class="btn">add</button>`)
}) // 委托给父级 ,添加出来的节点继承了原来的方法
- 动画效果
1、hide(1000) 隐藏1秒
show(1000) 显示1秒
toggle() => hide()+show() 在隐藏和显示之间切换
2、fadeOut() 淡出
fadeIn() 淡入
fadToggle() =>fadeOut() +fadeIn()
3、slideUp() 向上折叠
sildeDown() 向下延伸
sildeToggle() =>slideUp()+sildeDown()
4、animate({‘width:’ ’ ’,‘height:‘ ’ ’},1000) - js转jq
var = mybox = jQuery(box);
mybox.html('ccc');
- jq转js
var mybox = $('').get(1);
mybox.innerHTML = 'hi';
选择元素
- 选择器:基本、层次、属性、伪类
- 选取子元素:chirlden()
- 选取后代:find()
- 兄弟元素:
prev()上一个兄弟,
next()下一个兄弟,
prevAll()前面所有兄弟,
nextAll()后面所有兄弟,
siblings()所有兄弟元素(出当前元素外) - 父元素:
parent() 当前元素的父级元素
parents() 当前元素所有上级元素,可以添加一个参数,这个参数就是筛选功能
offestParent() 当前元素最近的那个有定位的上级元素
获取(设置)元素的宽度高度:
- width() width(‘100’)设置宽为100,默认px
- height()
- innerWidth() 自身宽+内边距(相当于js中的clientWidth)
- innerHeight() 自身高+内边距
- outerWidth() 自身宽+内边距+border(相当于js中的offestWidth)
- outerHeight() 自身高+内边距+border
- outerWidth(true) 自身宽+内边距+外边距+border
元素的位置:
-
offest()元素距离浏览器边框的距离,这个方法有两个属性(top、left),此方法只对可见元素有效。
$('p').offest().left
-
position() 方法返回当前元素相对于父元素的位置(偏移)。该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
(js中offestLeft/Top,当前元素到最近的上级元素的距离,包括margin)
(jq中当前元素相对于父元素的位置,不包括margin) -
scrollTop() 滚动条上下,也可以设置(scrollTop(100))
scrollLeft() 水平滚动条
(js中document.documentElement.scrollTop/Left)
jq的扩展方法
<div class="demo">11asdadassdaddww1</div>
// 给jquery扩展的实例方法
$.fn.extend({
red(){
this.css('color','red')
},
dian(){ //大于10位数按......显示
let str = this.html()
if(str.length >10) {
let result = ''
result = str.slice(0,10) + '......'
this.html(result)
}
}
})
// 给jquery扩展静态方法
$.extend({
yellow() {
console.log('yellow')
}
})
$('.demo').dian() //11asdadass......
$('.demo').red()
$.yellow()