图片一
图片二
图片三
课堂jQuery笔记
课堂jQuery笔记
一.Dom操作
1.append()末尾插入
$('.box').append($('Hello World1
'));
2.prepend()头部插入
$('.box').prepend($('Hello World1
'));
3.内容HTML/内容Text/值value
var x =$('h1').html()
console.log(x)
$('h1').text('你好'.fontcolor('red'))
$('h1').html('你好'.fontcolor('red'))
console.log($('input[type=password]').val())
$('input[type=text]').val('qiku123456789')
4.is() 判断元素
console.log($('.box').is('p'))
5 之前插入
$('img').before($('hello world1
'))
$('hello world2
').insertBefore($('img'))
6.之后插入
$('img').after($('hello world1
'))
$('hello world2
').insertAfter($('img'))
7 删除数据
remove 彻底删除 不保留 事件链接
detach 删除后 保留事件链接
empty 清空子节点
$('img').remove()
$('img').click(function(e){
console.log(this)
})
var x = $('img').detach()
console.log(x)
$('body').append(x)
$('.box').empty() //清空子节点
8 替换元素
$('img').replaceWith($('Hello
'))
$('Hello
').replaceAll($('img'))
9.克隆元素
var x = $('h1').clone()
$('body').append(x)
10 包装 方法
wrap 单独包装
wrapAll 将满足条件的都包在一起
$('p').wrap($(''))
var x=$('p').wrapAll($(''))
$('body').append(x.parent())
unwrap 去除父节点
$('font').unwrap()
wrapInner 内部包裹
$('p').wrapInner($(''))
二：属性操作
1.获得属性attr()
var x = $('img').attr('qk');
console.log(x)
var x = $('#c3').prop('checked'); // 获得计算的结果
var x = $('#c3').attr('checked');
console.log(x)
2.设置属性attr()
$('img').attr('height','300px')
$('img').attr({'height':'300px','width':'300px'})
3.删除属性
removeAttr()
removeProp()
$('img').removeAttr('qk')
$('img').removeProp('width')
三：样式操作
1设置样式属性
$('img').css('border','10px solid blue')
$('img').css({'border':'10px solid blue',"width":"100%",'box-sizing':'border-box'})
2.获得样式属性
var x =$('img').css('width')
console.log(x)
四:类的操作
1.类属性的添加
$(':header').addClass('active second')
2.类属性 的移除
$(":header").removeClass('active')
3.类属性的 切换
$(':header').toggleClass('active')
4.类属性的 判断
var x= $(':header').hasClass('second')
console.log(x)
5.位置关系
1.相对文档的偏移
var x = $('img').offset();
console.log(x)
2.相对文档的偏移 的设置
$('img').offset({'top':0,'left':0})
3.【相对父节点的偏移】 父节点添加定位，未添加相对于文档
var x = $('img').position();
console.log(x)
$('img').position({'top':0,'left':0})
4.元素的滑动条位置
console.log($(window).scrollTop())
$(window).scrollTop(500)
$('.box').scrollTop(100)
5.元素的大小
console.log($('img').width()) // content
console.log($('img').innerWidth()) // content+padding
console.log($('img').outerWidth()) // content+padding+border
console.log($('img').outerWidth(true)) // content+padding+border+margin
6.Dom遍历
1.获得直接父节点
var x = $('img').parent();
console.log(x)
2.获得所有父节点
var x = $('img').parents();
console.log(x)
3.获得区间所有父节点
var x = $('img').parentsUntil($('html'));
console.log(x)
4.获得直接子节点
var x = $('.box').children()
console.log(x)
5.获得所有的后代节点
var x = $('.box').find('*')
console.log(x)
6.水平遍历
var x = $('#p2').siblings(); // 除自已以外的其他兄弟节点
console.log(x)
7.下一个相邻兄弟
$('#p2').next().css('backgroundColor','red')
8.后面所有相邻兄弟
$('#p2').nextAll().css('backgroundColor','red')
9.后面区间所有相邻兄弟
$('#p2').nextUntil($('.box2')).css('backgroundColor','red')
10.上一个相邻兄弟
$('#p2').prev().css('backgroundColor','red')
11.上面所有相邻兄弟
$('#p2').prevAll().css('backgroundColor', 'red')
12.上面区间所有相邻兄弟
$('#p2').prevUntil($('#p3')).css('backgroundColor','red')
13.选择第一个
console.log($('p').first())
14.选择最后一个
console.log($('p').last())
15.按索引找
console.log($('p').eq(1))
console.log($('p:eq(1)'))
16.过滤
console.log($('li').filter($('.active')))
console.log($('li').not($('.active')))
17.根据索引获得元素 get() eq()
var x = $('li').get(0)
console.log(x) // 返回Dom节点
var x = $('li').eq(0)
console.log(x) // 返回Jquery对象
18. Each() 遍历
var x =$('p').each(function(index,ele){
if($(ele).hasClass('active')){
$(ele).css('backgroundColor','red')
}
})
console.log(x)
7.事件
1.页面加载事件
$(document).ready(()=>{})
$(()=>{
// var x= $('img')
// console.log(x)
console.log('jquery ready')
})
window.onload=function(){
// var x = document.querySelector('img');
// console.log(x)
console.log('window onload')
}
2.页面加载
$(() => {
// $('img').click(()=>{
// console.log('鼠标单击A')
// })
// $('img').click(()=>{
// console.log('鼠标单击B')
// })
// $('img').dblclick(()=>{
// console.log('鼠标双击点击')
// })
// $('img').bind('click',(e)=>{
// console.log('bind点击事件A')
// })
// $('img').bind('click',B)
// function B(){
// console.log('bind点击事件B')
// }
// $('img').bind('click',(e)=>{
// console.log('bind点击事件C')
// })
// 【清除全部 方法】
// $('img').unbind('click')
// 【清除指定 方法】
// $('img').unbind('click',B)
// 【on绑定事件】
// $('img').on('click',(e)=>{
// console.log('on点击事件',e)
// })
// 【清除on事件】
// $('img').off('click')
})
8.模拟事件
9动画
// 停止动画，参数1停止所有
// $('.box').stop(true)
// 判断动画状态
// console.log($('.box').is(":animated"))
// 选择动画的元素
// $(':animated').stop(true)
10jquery_ajax