#jQuery 的技术入门干货

最新推荐文章于 2022-12-05 19:34:54 发布

KingLiyihao

最新推荐文章于 2022-12-05 19:34:54 发布

阅读量112

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/m0_52304538/article/details/110200260

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 * margin

console.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()

KingLiyihao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#jQuery 的技术入门干货

jQuery-011. jQuery 概述jquery 是 js 的一个库，提供了很多方法，方便开发者操作元素jquery 当年解决了两个大问题，所以特别火操作dom方便、浏览器兼容性2. jQuery 入口函数// 当页面的 html 加载完立即执行$(function(){ }) 3. jQuery 顶级对象// jq 源码window.jQuery = window.$ = jQuery;// 所以相当于 $ 和 jQuery 都是 jquery的顶级对象
复制链接

扫一扫