jQuery-01
1. jQuery 概述
jquery
是 js 的一个库,提供了很多方法,方便开发者操作元素jquery
当年解决了两个大问题,所以特别火操作dom方便
、浏览器兼容性
2. jQuery 入口函数
// 当页面的 html 加载完 立即执行
$(function(){
})
3. jQuery 顶级对象
// jq 源码
window.jQuery = window.$ = jQuery;
// 所以 相当于 $ 和 jQuery 都是 jquery的顶级对象
4. DOM对象和 JQ对象相互转换
var divObj = document.querySelector('div')
$(divObj).hide() // dom对象 => jquery对象
$('div')[0] // jq对象 => dom对象
5. 层级选择器
-
first
last
第一个 最后一个 -
equal
相等 -
even
偶数 ,odd
奇数// $('ul li').css('background', 'pink') // first last 第一个 最后一个 $('ul li:last').css('background', 'pink') // equal 相等 eq $('ul li:eq(2)').css('background', 'blue') // even 4 偶数 odd 3 奇数 $('ul li:even').css('background', 'pink')
6. 父子元素
-
parent()
获取亲爹 -
children()
获取亲儿子 -
find()
获取子代,包含孙子// 获取亲爹 // console.log( $('ul').parent() ) // 亲儿子 console.log( $('#box').children() ) // find 查找,查找子代, 可以包括孙子 console.log( $('#box').find('li') )
7. 新浪下拉菜单
// 鼠标移入,将ul展示
$('.nav>li').mouseover(function(){
$(this).children('ul').show()
})
// 鼠标移入,将ul移除
$('.nav>li').mouseout(function(){
$(this).children('ul').hide()
})
8. 筛选选择器
-
siblings()
获取兄弟元素 -
eq()
获取对应索引元素// 只 选择自己的兄弟 $('.item').siblings().css('background', '#ccc') // eq() equal 相等 var index = 2 $('ul>li').eq(index).css('background', 'pink')
9. 排他思想
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script src="./jquery.js"></script>
<script>
//给所有按钮注册点击事件
$('button').click(function(){
// 将自己设置背影颜色 高亮
$(this).css('background', 'pink')
// 移除兄弟的背景颜色
$(this).siblings('button').css('background', '')
})
</script>
10. 淘宝精品案例
$('#left>li').mouseover(function(){
// 获取当前元素 在这一个伪数组的索引
var index = $(this).index()
// 将对应的图片展示
$('#content>div').eq(index).show()
// 将对应图片的兄弟全部隐藏
$('#content>div').eq(index).siblings().hide()
})
11. 修改样式
-
修改样式
css()
-
操作类名
addClass()
、removeClass()
、toggleClass()
$('div').css({ color: 'pink', fontSize: '50px' }) $('div').click(function(){ // 添加类名 并且不加 . // $(this).addClass('active') // 移除类名 // $(this).removeClass('active') // 切换类名 $(this).toggleClass('active') })
12. tab切换
-
将点击的按钮自己增加背景颜色
-
将点击的按钮的 对应的 div展示出来
// 给按钮注册点击事件 $('.tab_list li').click(function() { // 将点击的人 增加高亮 类名 让兄弟们移除高亮类名 $(this).addClass('current').siblings().removeClass('current') // 获取当前点击的按钮的 索引 var index= $(this).index() // 将对应索引的 div展示 让兄弟们隐藏 $('.tab_con div').eq(index).show().siblings().hide() })
13. 效果切换
-
hide()
、show()
、toggle()
直接显示元素,隐藏元素,切换元素 -
slideDown()
、slideUp()
、slideToggle()
下滑元素, 上划元素,滑动切换元素 -
fadeIn()
、fadeOut()
、fadeToggle()
、fadeTo()
淡入,淡出,淡入淡出切换, 淡出到指定透明度 -
animate()
效果自定义// hide show toggle $('button').eq(0).click(function() { $('div').show('slow', 'swing', function(){ $(this).css('background', 'green') }) }) $('button').eq(1).click(function() { $('div').hide() }) $('button').eq(2).click(function() { $('div').toggle() }) // slideDown slideUp slideToggle $('button').eq(0).click(function() { $('div').slideDown(1000, function(){ $(this).css('background', 'green') }) }) $('button').eq(1).click(function() { $('div').slideUp() }) $('button').eq(2).click(function() { $('div').slideToggle() }) // fadeIn fadeOut fadeTo fadeToggle $('button').eq(0).click(function() { $('div').fadeIn('slow', 'swing', function(){ $(this).css('background', 'green') }) }) $('button').eq(1).click(function() { $('div').fadeOut() }) $('button').eq(2).click(function() { $('div').fadeToggle() }) $('button').eq(3).click(function() { $('div').fadeTo(null, 0.5) }) // animate $('div').click(function() { $(this).animate({ width: 200, height: 200, left: 500, top: 200 }, 2000) })
jQuery-02
1. 属性操作
-
内置属性
prop()
-
自定义属性
attr()
-
jq对象添加属性
data()
// 获取内置属性 console.log( $('div').prop('class') ) // 获取自定义属性 console.log( $('div').attr('data-index') ) // 设置属性 给 jq对象 $('div').data('username', '张三') console.log( $('div').data('username') )
2. 内容修改
-
修改、获取表单内容
val()
-
修改、获取普通元素
html()
、text()
// 获取普通元 console.log( $('div').text() ) console.log( $('div').html() ) // 获取表单内容 console.log( $('input').val() )
3. parents()
// 获取 祖 籍 元素
console.log( $('.one').parents() ) // 获取自己的 所有 祖籍 包括 html body 父级 等
console.log( $('.one').parents('.box') ) // 获取一个叫 box的祖籍
4. 遍历、循环、迭代
-
$('div').each
遍历元素 -
$.each()
遍历数据$('div').each(function(index, element) { $(element).css('background', arr[index]) }) var arr = ['小英', '富贵', '发财'] var obj = { address: '西安', info: '信息' } $.each(arr, function(index, item){ console.log( index, item ) }) $.each(obj, function(index, item){ console.log( index, item ) })
5. 创建、添加、删除
-
创建
$('<li>小丽</li>')
-
添加
append()
prepend()
after()
before()
-
删除
empty()
remove()
html('')
text('')
var li = $('<li>小丽</li>') //创建元素 $('ul').append(li) // 给ul 从后边内部添加 元素 $('ul').prepend(li) // 给ul 从前边内部添加 元素 $('ul').after(li) // 给ul 添加 从后边 兄弟元素 $('ul').before(li) // 给ul 添加 从前变 兄弟元素 $('ul').remove() // 真实的 将 ul 移除 $('ul').empty() // 将 ul 内部清空 $('ul').html('') // 将 ul 内部清空 $('ul').text('') // 将 ul 内部清空
6. 尺寸
-
width()
只获取元素width -
innerWidth()
元素的width + 2 * padding -
outerWidth()
元素的 width + 2*padding + 2 * border -
outerWidth(true)
元素的 width + 2*padding + 2 * border + 2 * marginconsole.log( $('div').width() ) // width console.log( $('div').innerWidth() ) // width + padding console.log( $('div').outerWidth() ) // width + padding + border console.log( $('div').outerWidth(true) ) // width + padding + border + margin
7. 位置
-
offset()
获取元素距离文档顶部和左侧的距离 -
position()
获取元素距离父级定位元素的距离,如果父级没有定位,则获取相对文档的距离// 真实的 距离 文档的距离 console.log( $('.son').offset() ) // 如果父元素是定位 则是获取距离父级的位置 ,如果没有定位则是获取距离 文档的 console.log( $('.son').position() )
8. 滚动出去距离
-
scrollTop()
获取元素滚动出去距离 -
$(document).scroll()
给页面注册滚动事件// 给页面注册滚动事件 $(document).scroll(function() { var pageTop = $(document).scrollTop() // 获取页面滚动出去的 距离 })
jQuery-03
1. 事件处理 on
-
on()
可以帮我们注册多个事件// 利用 on 注册多个事件 $('div').on({ mouseover: function(){ console.log(666) }, mouseout: function(){ console.log(888) } })
-
on()
主要用来实现事件委托// 利用 事件委托 事件委派 解决动态创建元素的事件生效问题 $('ul').on('click', 'li', function(){ console.log(123123) })
2. 微博发布案例
-
给添加按钮注册事件,当点击 获取 textarea 里的val
-
生成 li ,添加到 ul中
-
将 获取的 val,设置给 li的 html
-
利用 事件委托 给 button 注册事件
// 添加按钮注册事件 $('button').one('click', function(){ var li = $('<li></li>') li.html( $('textarea').val() + '<input type="button" value="删除" />' ) $('ul').prepend(li) li.slideDown() $('textarea').val('') }) // 利用 事件委托 给 button 注册事件 $('ul').on('click', 'input', function(){ $(this).parent().slideUp(function(){ $(this).remove() }) })
3. off 解绑
- 利用
off()
方法 可以解绑 利用on()
给元素注册的事件
4. 触发事件
trigger()
会触发默认行为,比如input的获取焦点triggerHandler()
不会触发默认行为
5. 插件的使用
- 使用百度,jquery之家,jquery插件库,搜索心仪的框架
- 将找到的插件下载下来
- 打开下载在下来的插件打开进行查看,是否符合预期
- 查看网页插件介绍和使用说明
- 配合本地打开的插件和说明,移植到自己希望使用插件的位置
6. todoList开发思路
-
按下回车,获取本地存储数据
// 获取本地存储的值 function getList() { var list = localStorage.getItem('todolist') return list ? JSON.parse(list) : [] } $('#title').keydown(function(e) { // 按下的是 回车 if( e.keyCode === 13) { // 先获取本地存储的值 var list = getList() } })
-
将数据保存到本地存储
// 设置本地存储的值 function setList(list) { var str = JSON.stringify(list) localStorage.setItem('todolist', str ) } $('#title').keydown(function(e) { if( e.keyCode === 13) { // 先获取本地存储的值 var list = getList() // 组合 一个新存储的对象 var obj = { title: $(this).val(), done: false } // 添加给就数组 list.unshift(obj) // 存储到本地存储 setList(list) })
-
将本地存储数据渲染到页面
// 渲染页面 function render() { // 页面一加载 先清空自己 $('#todolist').html('') // 获取本地存储的数据 var list = getList() $.each(list, function(index, item) { // 每循环一次 生成一个 li 放入我们的 正在进行中 的盒子中 var li = $('<li><input type="checkbox" name="" id=""><p>' + item.title + '</p><a href="javascript:;" data-index="'+index+'"></a></li>') // 将 li 添加到 ul中 $('#todolist').append(li) } } render()
-
给删除按钮注册事件
//利用事件委托 给 a标签 注册删除事件 $('#todolist').on('click', 'a', function() { // 获取点击的删除按钮的索引 var index = $(this).attr('data-index') // 获取本地数据 var list = getList() // 将要删除的数据移除 list.splice(index, 1) // 从新设置本地存储 setList(list) // 从新渲染页面 render() })
-
点击复选框操作 完成状态
// 利用事件委托 给 input:checkbox 注册事件 $('#todolist').on('click', 'input', function() { // 获取点击的 checkbox的索引 var index = $(this).siblings('a').attr('data-index') // 获取本地存储数据 var list = getList() // 将数据进行更改 list[index].done = $(this).prop('checked') // 将数据存储到本地 setList(list) // 渲染页面 render() })
-
利用 done 属性 判断是否完成,分别渲染到 已完成,和 正在进行
function render() { var donecount = 0 var todocount = 0 // 页面一加载 先清空自己 $('#todolist, #donelist').html('') // 获取本地存储的数据 var list = getList() $.each(list, function(index, item) { // 每循环一次 生成一个 li 放入我们的 正在进行中 的盒子中 if( item.done ) { // 已经完成 var li = $('<li><input type="checkbox" name="" id="" checked><p>' + item.title + '</p><a href="javascript:;" data-index="'+index+'"></a></li>') $('#donelist').append(li) donecount += 1 } else { var li = $('<li><input type="checkbox" name="" id=""><p>' + item.title + '</p><a href="javascript:;" data-index="'+index+'"></a></li>') $('#todolist').append(li) todocount += 1 } }) $('#todocount').text(todocount) $('#donecount').text(donecount) } render()