【前端】jQuery 纯干货 基础知识 + 面试题分享！

已于 2023-04-07 14:28:41 修改
阅读量753 收藏 6
点赞数 1
分类专栏： 前端面试分享 文章标签： jquery
于 2020-10-13 15:31:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45613931/article/details/109050550
版权

jQuery 基础用法分享

最近忙着找工作，在这期间的复习过程中，为了方便查阅，总结了很多我常用到的基础内容和面试题。在这里分享给大家，大家也可以参考复习。

首先需要说明的是，因为jQuery本身就是对JS的简化，那么既然能简化，所以我把大部分的代码重心都放在了jQuery上，而不是JS（尤其是DOM操作）。而且这部分的学习，会更好的帮我们去理清思路和逻辑，方便之后在Vue、React里面的运用（我大量时间都使用Vue）。因此这部分的学习也还是比较重要的。

因此我在之前JS的分享中，基础知识并不是很全面，如果想看JS的DOM操作：JS的DOM操作，更多简化使用的方法jQuery将会在本文中分享。

jQuery简单使用

<body>
  <input type="text" id="username" placeholder="请输入">
  <button id="btn">确定(jQuery版)</button>

<script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
      var $btn = $('#btn')
      $btn.click(function() { // 给btn2绑定点击监听
        var username = $('#username').val()
        alert(username)
      })
    })
</script>
</body>

$(function() {})和JS中用的window.onload=function(){}
其实用途差不多，主要是想让其中的内容，尽快加载到浏览器中。
比如jQuery的就是，当DOM加载完成后，执行此回调函数。因此就可以把监听等事件放在其中。

个人遇到的问题：
之前我有点分不清什么时候使用$('#username').val() 和 $('#btn').html()，
从目前来看，val()就是JS中的value()，也就是会用于，有value属性的标签，那也就是说，val()一定主要用于在input中获取内容。因为input text的文本框中的内容，其实就是存放在value属性上的，而html()就是JS中的innerHtml()，它就可以获取其他普通标签中的内容。如下例。
同时也可以用这两个函数去修改原标签中的内容，只需要在()中添加想要添加的内容，就可以替换掉原内容了。

<div>
  <button id="btn">测试</button>
</div>

<script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $('#btn').click(function() {
      alert($('#btn').html())
    })
  })
</script>

jQuery库中的$()是什么？

$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，然后就被允许调用定义在 jQuery 对象上的多个不同方法。

$(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处是它适用于所有浏览器，帮我们解决了跨浏览器的难题。

JavaScript window.onload 事件和 jQuery ready 函数有何不同？

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

jQuery对象

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象。

<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>

<script src="js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
 //需求1. 统计一共有多少个按钮
 var $buttons = $('button')
 /*size()/length: 包含的DOM元素个数*/
 console.log($buttons.size(), $buttons.length)

 //需求2. 取出第2个button的文本
 /*[index]/get(index): 得到对应位置的DOM元素*/
 console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)

 //需求3. 输出所有button标签的文本
 /*each(): 遍历包含的所有DOM元素*/
 $buttons.each(function() {
  console.log(this.innerHTML)
 })

 //需求4. 输出'测试三'按钮是所有按钮中的第几个
 /*index(): 得到在所在兄弟元素中的下标*/
 console.log($('#btn3').index())
 
// 但这个数组属于伪数组 
 console.log($buttons instanceof Array) // false
</script>

size()和jquery.length之间有什么区别?

方法的作用是:返回对象中元素的个数。
但是不推荐使用size()方法，因为jQuery提供了.length属性，它也做同样的事情。
但是.length属性是首选的，因为它没有函数调用的开销。

jQuery中的eq()和get()方法有什么不同?

eq()将元素作为jQuery对象返回。
该方法从该集合中的一个元素构造一个新的jQuery对象并返回它。
这意味着您可以在上面使用jQuery函数。

get()返回一个DOM元素。
方法检索与jQuery对象匹配的DOM元素。
但是因为它是一个DOM元素，而不是一个jquery封装的对象。
因此无法使用jQuery函数。

用jQuery修改CSS样式 => 选择器

选择器和CSS相同。常用选择器：
在这里插入图片描述
以下修改css的方式，主要用于实时变换的情况，比如点击按钮变换css样式，也就是说如果有一些不需要变动的默认样式，显然写在这里不方便，当然还要写在style里。

//选择所有的div和span元素
$('div,span').css('background', 'black')
//选择所有class属性为box的li元素
$('li.box').css('background', '#666')
//获取所有class属性为box的li元素的background样式
$('li.box').css('background')

//1. 选中ul下所有的的span
$('ul span').css('background', 'yellow')

//2. 选中ul下所有的子元素span
$('ul>span').css('background', 'yellow')

//3. 选中class为box的下一个li
$('.box+li').css('background', 'yellow')

//4. 选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background', 'yellow')

//1. 选择第一个div
$('div:first').css('background', 'red')

//2. 选择最后一个class为box的元素
$('.box:last').css('background', 'red')

//3. 选择所有class属性不为box的div
$('div:not(.box)').css('background', 'red')

//4. 选择内容为BBBBB的li
$('li:contains("BBBBB")').css('background', 'red')

//5. 选择第二个和第三个li元素
$('li:gt(0):lt(2)').css('background', 'red') 
$('li:lt(3):gt(0)').css('background', 'red')

//6. 选择有title属性的li元素
$('li[title]').css('background', 'red')

//7. 选择所有属性title为hello的li元素
$('li[title="hello"]').css('background', 'red')

表单选择器

<body>
 <form>
  用户名: <input type="text" />
  <br>
  密 码: <input type="password" />
  <br>
  爱 好:
  <input type="checkbox" checked="checked" />篮球
  <input type="checkbox" />足球
  <input type="checkbox" checked="checked" />羽毛球
  <br>
  性 别:
  <input type="radio" name="sex" value='male' />男
  <input type="radio" name="sex" value='female' />女
  <br>
  邮 箱: <input type="text" name="email" disabled="disabled" />
  <br>
  所在地:
  <select>
   <option value="1">北京</option>
   <option value="2" selected="selected">天津</option>
   <option value="3">河北</option>
  </select>
  <br>
  <input type="submit" value="提交" />
 </form>

 <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  //1. 选择不可用的文本输入框
  $(':text:disabled').css('background', 'red')

  //2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length)

  //3. 显示选择的城市名称
  $(':submit').click(function() {
   var city = $('select>option:selected').html()
   alert(city)
  })
  </script>
</body>

个人遇到的问题：jQuery的选择器，还是有说法的，我自己很容易记混。平常常用的选择器还是和CSS的用法一样，不需要额外记忆。但是除此以外，如果是标签自身就有的属性，那么去调用都是：的。

比如表单选择器$(':checkbox:checked')就获取到了多选表单项的已被选中的选项。
而如果不是表单项，那么就需要这么去获取：$('li[title="hello"]')。

通过选择器，我们获得了满足条件的标签，而我们能对这个标签做的操作就是：
修改它的CSS，输出标签的内容html() 或者 val()，又或者输出length。
如果要修改内容，就在html和val内添加即可。

在以上只是获取标签并修改它的样式和内容，接下来就涉及到获取标签属性并对其修改等操作。

修改属性，添加class

//1. 读取第一个div的title属性
$('div:first').attr('title')
//2. 给所有的div设置name属性(value为hello)
$('div').attr('name', 'hello')
//3. 给所有的div设置多个属性
$('div').attr({name: 'hello',title: 'hello2'})
//4. 移除所有div的title属性
$('div').removeAttr('title')
//5. 给所有的div设置class='guiguClass'
$('div').attr('class', 'guiguClass')
//6. 给所有的div添加class='abc'
$('div').addClass('abc')
//7. 移除所有div的guiguClass 
$('div').removeClass('guiguClass')

之前我提到我自己分不清：$('#username').val() 和 $('#btn').html()
那如果做如下修改，就很容易理解了：
$(':text').val() 得到输入框的val
$('li:last').html() 得到某标签体的文本

前面使用到的attr，专门操作非布尔值的属性，如上面的用法。
而接下来的prop，专门操作布尔值的属性，
也就是说prop十分适用于表单项，如下例。

//1. 点击按钮实现多选框全选
var $checkboxs = $(':checkbox')
$('button:first').click(function() {
 $checkboxs.prop('checked', true)
})
//2. 点击按钮实现多选框全不选
$('button:last').click(function() {
 $checkboxs.prop('checked', false)
})

jQuery中attr和prop的区别

对于html元素本身就带有的固定属性（本身就带有的属性），在处理时，使用prop方法，且它可以操作布尔类型的属性。

对于html元素我们自己定义的dom属性，在处理时，使用attr方法，且它不可以操作布尔类型的属性。

以上所有容易混淆的方法的总结：

在这里插入图片描述

$常用的工具方法

在这里插入图片描述

//1. $.each(): 遍历数组或对象中的数据
var obj = {
 name : 'Tom',
 setName : function(name) {
  this.name = name
 }
}
$.each(obj, function(key, value) {
 console.log(key, value)
})

//2. $.trim(): 去除字符串两边的空格
var str = ' hello  '
console.log($.trim(str))

//3. $.type(obj): 得到数据的类型
console.log($.type($)) // 'function'

//4. $.isArray(obj): 判断是否是数组
console.log($.isArray($('body')), $.isArray([])) // false true

//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) // true

//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json))
json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json))

offset 、position、scrollTop

$('.div1').offset() // 相对页面左上角的坐标
$('.div2').position() // 相对于父元素左上角的坐标
// 修改盒子在页面中的位置
$('.div2').offset({
 left : 50,
 top : 100
})

$('div').scrollTop() // 读取div滚动条的Y坐标
// 兼容IE/Chrome的读取页面滚动条的Y坐标
$(document.documentElement).scrollTop() + $(document.body).scrollTop()

// 设置div / 页面滚动条的Y坐标
$('div').scrollTop(200)
$('html,body').scrollTop(300)

元素尺寸

  1. 内容尺寸
    height(): height
    width(): width
  2. 内部尺寸
    innerHeight(): height+padding
    innerWidth(): width+padding
  3. 外部尺寸
    outerHeight(false/true): height+padding+border 如果是true, 加上margin
    outerWidth(false/true): width+padding+border 如果是true, 加上margin
$('div').width(), $('div').height()
$('div').innerWidth(), $('div').innerHeight()
$('div').outerWidth(), $('div').outerHeight()
$('div').outerWidth(true), $('div').outerHeight(true)

筛选

在上文中，如果要想获取标签，修改样式，是这么做的：
$('div:first').css('background', 'red')
也就是，无论是想获取什么样的标签，这个first，last，not等，都是用在选择器当中的。但是在这里还有一种用法，就是先获取到这个标签到jQuery对象数组中，然后再对这个对象数组进行操作，来获取想要的那个具体的标签，修改样式。

举个简单的例子，上面的代码就可以改成这样：

var $lis = $('ul>li')
$lis.first().css('background', 'red')

或者

$lis[0].style.background = 'red'

这就是所谓筛选，对对象数组的筛选。

例子：

var $lis = $('ul>li')

//1. ul下li标签第一个
$lis.first().css('background', 'red')
$lis[0].style.background = 'red'

//2. ul下li标签的最后一个
$lis.last().css('background', 'red')

//3. ul下li标签的第二个
$lis.eq(1).css('background', 'red')

//4. ul下li标签中title属性为hello的
$lis.filter('[title=hello]').css('background', 'red')

//5. ul下li标签中title属性不为hello的
$lis.not('[title=hello]').css('background', 'red')
// 或者：
$lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

//6. ul下li标签中有span子标签的
$lis.has('span').css('background', 'red')


var $ul = $('ul')
//1. ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background', 'red')

//2. ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background', 'red')

//3. ul标签的父标签
$ul.parent().css('background', 'red')

//4. id为cc的li标签的前面的所有li标签
var $li = $('#cc')
$li.prevAll('li').css('background', 'red')

//5. id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')

标签内容的增删改

在这里插入图片描述

//1. 向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1')
$ul1.append('<span>append()添加的span</span>')
$('<span>appendTo()添加的span</span>').appendTo($ul1)

//2. 向id为ul1的ul下添加一个span(最前)
$ul1.prepend('<span>prepend()添加的span</span>')
$('<span>prependTo()添加的span</span>').prependTo($ul1)

//3. 在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

//4. 在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('<span>after()添加的span</span>')

//5. 将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')

//6. 移除id为ul2的ul下的所有li
$('#ul2').empty()
$('#ul2>li').remove()

jQuery中 empty() 、detach() 、remove() 方法的区别是什么?

三者都被用来移除一个DOM元素, 但三者之间的主要不同在于
.empty()：移除被选元素的所有子节点和内容。但该方法不会移除元素本身，或它的属性。
.remove()：移除元素及它的数据和事件。
.detach()：移除被选元素，但是它会保留数据和事件，允许它们在以后被重新插入。

事件的绑定与解绑

在这里插入图片描述

//1. 给.out绑定点击监听(用两种方法绑定)
/*$('.out').click(function () {
 console.log('click out')
 })*/
$('.out').on('click', function() {
 console.log('on click out')
})
//2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
/*
 $('.inner')
 .mouseenter(function () { // 进入
  console.log('进入')
 })
 .mouseleave(function () { // 离开
 console.log('离开')
 })
 */
/*
 $('.inner')
 .on('mouseenter', function () {
 console.log('进入2')
 })
 .on('mouseleave', function () {
 console.log('离开2')
 })
 */
$('.inner').hover(function() {
 console.log('进入3')
}, function() {
 console.log('离开3')
})
//3. 点击btn1解除.inner上的所有事件监听
$('#btn1').click(function() {
 $('.inner').off()
})
//4. 点击btn2解除.inner上的mouseenter事件
$('#btn2').click(function() {
 $('.inner').off('mouseenter')
})

在这里涉及到了两个区分，
一个是在上面提到的on(‘eventName’, fun)与eventName(fun)，
一个是在上面用到的mouseover、mouseenter和hover。
对于第一个区分，其实已经提到了，on的方式无论面对什么样的事件，都可以实行，即通用。但是和不加on相比，会稍微麻烦些。但是不加on虽然编码简单，但是有的事件是不能这样使用的。虽然我没有查阅哪些事件不能使用这个方式，但是常用的事件肯定也能这么用。

对于第二个区分，
mouseover + mouseout：在移入子元素时也会触发。
即，如果父元素中存在着子元素，此时若给父元素添加该事件，那么鼠标移入子元素也会触发。而相对的，以下方式就是鼠标移入子元素不会触发。即：每一个事件只会处理仅有该元素的部分。
mouseenter + mouseleave：只在移入当前元素时才触发。

hover()没什么特别的，它使用的就是mouseenter()和mouseleave()，也就是在最开始html阶段使用的a:hover。

事件的坐标及相关处理

在这里插入图片描述
兼容性问题解决方案：event = event || window.event;

//5. 点击btn3得到事件坐标
$('#btn3').click(function(event) { // event事件对象
 console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
 console.log(event.clientX, event.clientY) // 原点为窗口的左上角
 console.log(event.pageX, event.pageY) // 原点为页面的左上角
})
//6. 点击.inner区域, 外部点击监听不响应
$('.inner').click(function(event) {
 console.log('click inner')
 //停止事件冒泡
 event.stopPropagation()
})

停止事件冒泡就是：当你点击子元素，父元素并不会作出任何操作，即点击子元素不会影响父元素。当想要实现父元素的效果，就去点击子元素以外的部分。否则，如果不停止事件冒泡，那么点击子元素 = 点击父元素。

//7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click(function(event) {
 if (Date.now() % 2 === 0) {
  event.preventDefault()
 }
})

阻止事件默认行为，就是阻止这个事件被触发。

事件委托(委派/代理)（事件监听）

引例：比如说以下用法，当你点击按钮向ul中添加一个新增的li时，新增的li不会获得之前设置的click事件，这显然是个很棘手的问题。

$('ul>li').click(function() {
 this.style.background = 'red'
})

$('#btn').click(function() {
 $('ul').append('<li>新增的li....</li>')
})

但是有了事件委托（监听）就可以实现了。

比如上面的例子中，我们要在ul中新增li，同时要能够“发现”ul中新增了li，并且可以为这个li添加事件，那么这个监听肯定要加在父元素中。因为增加或者其他的变化都是在这个父元素上，只有把监听加在父元素上，才能“发现”这一系列的变化。也就是：多个子元素的事件监听委托给父元素处理。那么它的原理到底是怎样的呢？我们已经知道子元素的事件监听委托已经交给父元素处理，也是因为只有父元素才可以监视到变化。那么当我们想操作任何一个子元素时，事件理所应当就会冒泡到父元素上，因为事件已经委托给父元素了。这时，父元素其实也没有直接处理事件，而是根据event.target得到发生事件的子元素，再把事件回调函数给这个子元素调用。也就是父元素真的是实现了事件的委托。
在这里插入图片描述

// 设置事件委托
$('ul').delegate('li', 'click', function() {
 this.style.background = 'red'
})

$('#btn1').click(function() {
 $('ul').append('<li>新增的li....</li>')
})

$('#btn2').click(function() {
 // 移除事件委托
 $('ul').undelegate('click')
})

淡入淡出效果

在这里插入图片描述

  var $div1 = $('.div1')

  $('#btn1').click(function() {
    $div1.fadeOut(1000, function() {
      alert('动画完成了!!!')
    })
  })

  $('#btn2').click(function() {
    $div1.fadeIn("slow",function(){
      alert("动画完成了")
    })
  })

  $('#btn3').click(function() {
    $div1.fadeToggle("fast",function(){
      alert("动画完成了");
    })
  })

滑动动画

在这里插入图片描述

var $div1 = $('.div1')

$div1.mouseenter(function(){
 $div1.slideUp(3000)
})
$div1.mouseleave(function(){
 $div1.slideDown(3000)
})

// 1. 点击btn1, 向上滑动
$('#btn1').click(function() {
 $div1.slideUp(3000)
})

// 2. 点击btn2, 向下滑动
$('#btn2').click(function() {
 $div1.slideDown('fast',function(){
  alert("完成！");
 })
})

// 3. 点击btn3, 向上/向下切换
$('#btn3').click(function() {
 $div1.slideToggle('slow',function(){
  alert("完成！");
 })
})

显示与隐藏

在这里插入图片描述

var $div1 = $('.div1')
//1. 点击btn1, 立即显示
$('#btn1').click(function() {
 $div1.show()
})

//2. 点击btn2, 慢慢显示
$('#btn2').click(function() {
 $div1.show(1000)
})

//3. 点击btn3, 慢慢隐藏
$('#btn3').click(function() {
 $div1.hide(1000)
})

//4. 点击btn4, 切换显示/隐藏
$('#btn4').click(function() {
 $div1.toggle(1000)
})

在这里就一定要说的：以上三个，淡入淡出效果，滑动效果，显示与隐藏效果。我猜它们本质上就类似于在css里用到的transition和animation，由这些效果所封装的。那么接下来就提到“自定义动画”，也就是说我们可以在jQuery中自己决定动画的效果。也许你会疑问，那我为什么不去css中设置过渡和动画，非要在jQuery中想办法设置呢？这个问题的答案，通过前面对一些问题的看法，看到这部分，其实已经可以猜到了，当然我说的不一定对，但是我可以肯定的是：首先在jQuery中如果调用上述三个效果，通过代码量来判断，它一定会比css的动画和过渡简单的多，这是显而易见的。除此以外，如果你在css中设置，那就固定效果了，我指的是，如果在页面运行过程中，用户新添加一个元素，那么肯定无法在最开始就设置好这些效果。而在jQuery中（及之后的Vue），是可以实现事件监听的。先不论你想要的效果能否通过监听实现，但至少可以通过事件监听实现动态效果。

自定义动画

在这里插入图片描述

var $div1 = $('.div1')
/*
 1. 逐渐扩大：宽先扩为200px, 高后扩为200px
 */
$('#btn1').click(function() {
 $div1.animate({
  width : 200
 }, 1000).animate({
  height : 200
 }, 1000)
})

/*
 2. 移动到指定位置：移动到(100, 20)处
 */
$('#btn2').click(function() {
 $div1.animate({ // 向左上移动
  left : 100, 
  top : 20
 }, 1000)
})

/*
 3.移动指定的距离：移动距离为(-100, -20)
 */
$('#btn3').click(function() {
 $div1.animate({
  left : '-=100',
  top : '-=20'
 }, 3000)
})

$('#btn4').click(function() {
 $div1.stop()
})

点击切换效果

在这里插入图片描述

var $contents = $('#container>div')
var currIndex = 0 //当前显示的内容div的下标
$('#tab>li').click(function () { // 隐式遍历
  // 隐藏当前已经显示的内容div
  $contents[currIndex].style.display = 'none'
  // 显示对应的内容div
  // 得到当前点击的li在兄弟中下标
  var index = $(this).index()
  // 找到对应的内容div, 并显示
  $contents[index].style.display = 'block'
  // 更新下标
  currIndex = index
})

回到顶部效果（html的方法和jQuery方法）

html的方法就是瞬间移动到顶部，在jQuery中可以缓慢移动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    .block1,.block2,.block3{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
      color: white;
      border: 1px solid red;
      height: 400px;
      margin: 0 100px;
    }
    .top a{
      position: fixed;
      top: 100px;
      text-decoration: none;
      right: 50px;
      width: 40px;
      height: 50px;
      background-color: #5bc0de;
      color: white;
      padding-top: 10px;
      padding-left: 5px;
    }
    .top2{
      position: fixed;
      top: 200px;
      right: 50px;
      width: 40px;
      height: 50px;
      background-color: #5bc0de;
      color: white;
      padding-top: 10px;
      padding-left: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="block1">测试1</div>
  <div class="block2">测试2</div>
  <div class="block3">测试3</div>

  <div class="top">
    <a href="#">回到顶部</a>
  </div>
  <div class="top2">回到顶部2</div>
<script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
  $('.top2').click(function () {
    // 瞬间滚到顶部
    // $('html,body').scrollTop(0)

    // 平滑滚到顶部
    // 总距离
    var $page = $('html,body')
    var distance = $('html').scrollTop() + $('body').scrollTop()
    // 总时间
    var time = 500
    // 间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)
    // 使用循环定时器不断滚动
    var intervalId = setInterval(function () {
      distance -= itemDistance
      // 到达顶部, 停止定时器
      if(distance<=0) {
        distance = 0 //修正
        clearInterval(intervalId)
      }
      $page.scrollTop(distance)
    }, intervalTime)
  })
</script>
</body>
</html>

作者想说的话：这种类似的效果已经在各种UI组件库中被封装起来，可以去直接使用了，所以虽然现在这些原理不需要掌握，但是去了解还是蛮有意思的。

导航条的一种动态效果

在这里插入图片描述

#navigation ul li ul {
  background-color: #88C366;
  position: absolute;
  width: 80px;
  overflow: hidden; <-这个是关键
  display: none;   <-这个是关键
}

$('#navigation>ul>li:has(ul)').hover(function () {
  //动画展开
  $(this).children('ul').stop(true).slideDown()
}, function () {
  // 动画收缩
  $(this).children('ul').stop(true).slideUp()
})

全选练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'提交': 提示所有勾选的爱好
   5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   */
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')

  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    $items.prop('checked', true)
    $checkedAllBox.prop('checked', true)
  })

  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    $items.prop('checked', false)
    $checkedAllBox.prop('checked', false)
  })

  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    $items.each(function () {
      this.checked = !this.checked
    })
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })

  //4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    $items.filter(':checked').each(function () {
      alert(this.value)
    })
  })

  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  $checkedAllBox.click(function () {
    $items.prop('checked', this.checked)
  })

  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  $items.click(function () {
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })
</script>
</body>

</html>

注册时需要看完协议

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #test{
      width: 100px;
      height: 100px;
      overflow: auto;
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <div id="test">
    111111
    111111
    111111
    111111
    111111
    111111
    111111
    111111
  </div>
  <input type="checkbox" disabled>我已仔细阅读协议
  <input type="submit" value="注册" disabled>
<script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
  $(()=>{
    $div = $('#test')
    $div.scroll(()=>{
      if($div.scrollTop() > 60){
        $(':checkbox').prop('disabled',false)
        $(':submit').prop('disabled',false)
      }
    })
    $(':submit').click(()=>{
      alert('注册完毕')
    })
  })
</script>
</body>
</html>

在这里需要注意：对于input标签，如果要修改其中的属性，一定要用prop。
像我之前就混淆了，直接找$(‘:checkbox’).disabled，就发现找不到。那如果是其他标签，就用attr。

让div随着鼠标移动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #test{
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
</head>
<body>
  <div id="test"></div>

<script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
  $(()=>{
    $div = $('#test')
    $div.mousemove((event)=>{
      event = event || window.event;
      $div.css('top',event.clientY - 50)
      $div.css('left',event.clientX - 50)
    })
  })
</script>
</body>
</html>

什么是jQuery.noConflict()？

有一些其他的客户端库也使用$()作为它们的全局函数并定义变量。这种情况会产生冲突。为了克服这种情况，jQuery引入了jQuery.noConflict()。
我们可以在jQuery中使用自己的特定字符代替$符号

var $j = jQuery.noConflict();
$j(document).ready(function(){
   $j("div").hide();
});

为什么有两个不同版本的jQuery库？

jQuery库有2个不同的版本：生产和部署。
生产版本在开发时非常有用，因为jQuery是开源的，如果你想改变一些东西，那么你可以在生产版本中进行这些更改。但部署版本是缩小版本或压缩版本，因此无法对其进行更改。因为它是压缩的，因此可以快速加载并节省带宽(适用于生产环境)。

如何判断元素为空？

有两种方法可以检查元素是否为空。
我们可以使用“:empty”选择器来检查。

$(document).ready(function(){
    if ($('#element').is(':empty')){
       //Element is empty
    }
});

第二种方法是使用“$.trim()”方法。

$(document).ready(function(){
     if($.trim($('#element').html())==' ') {
       //Element is empty
    }
});

如何检查jQuery中是否存在元素

使用jQuery length属性，我们可以确保元素是否存在。

$(document).ready(function(){
    if ($('#element').length > 0){
       //Element exists
    });
});
只爭朝夕不負韶華
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Jquery 常见面试题
2301_76917110的博客
03-09 636
Jquery 常见面试题
五个常见的 jQuery 面试题
qq_42431718的博客
01-19 664
【代码】五个常见的 jQuery 面试题。
2024年前端最新最常见的 20 个 jQuery 面试问题及答案(1)，2024年最新web前端面试官问上家公司有多少人怎么回答
2401_84123150的博客
05-14 520
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
最常见的 20 个 jQuery 面试问题及答案
热门推荐
hupitao的专栏
03-18 2万+
毫无疑问，jQuery给了JavaScript急需的提振，这是一门如此有用，但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前，我们曾今会写出冗长的JavaScript代码，不仅仅为更大型的应用程序，有时即使是更小的应用程序也要如此. 那种代码常常是既难以阅读又难以维护的. 　　在使用这个优秀的库之前写过原生的JavaScript，仅仅在用过它的一个月之后，我就能意识到jQuery
jQuery面试题整理
前端小白菜
07-21 3058
网上搜集的一些题目，供参考。
jquery的几道面试题
weixin_50736511的博客
01-07 810
1、 jQuery 库中的 $() 是什么？ $ （）是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。 2.$(document).ready() 是个什么函数？为什么要用它？ 这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如H
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
前端基础、高级、进阶面试题
06-02
本资料集“前端基础、高级、进阶面试题”旨在帮助开发者准备不同层次的面试，从基础知识到高级概念，再到深入的进阶话题，全面覆盖了前端开发的关键知识点。 1. **基础面试题** - HTML：理解HTML语义化，掌握HTML5...
前端面试题基础篇293题
03-10
包含第一部分html,第二部分CSS,第三部分JavaScript，第四部分Jquery,第五部分Bootstrap,第六部分微信小程序，第七部分webpack,第八部分常用编程题，第九部分其他常问内容如负载均衡、CDN、内存泄露、babel原理、js...
sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】
最新发布
05-27
sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】sumerui - jQuery仿...
奶茶官网前端设计项目+jQuery+css+swiper+html
06-08
奶茶官网前端设计项目，主要是针对奶茶公司产品宣传推广，加盟等功能，产品设计高端大气，布局合理，理念新颖，讲好品牌故事，加盟，服务与展示是网站的主要功能，本设计可以作为奶茶类公司开发网站的参考模板，主要...
2023年个人js前端面试题
sundaoli_0的博客
02-21 260
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象，状态变更时，通过diff算法查找出差异，更新dom树，优点，无需手动操作dom元素，提高开发效率，跨平台在服务端渲染，移动端开发。闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的常见方法就是在一个函数内部创建另一个函数，创建的函数可以访问到当前函数的局部变量，可以通过这种方式来创建私有变量，另一个作用是使已经结束运行的函数上下文的变量继续留在内存中，因为闭包函数保留了变量的引用，所以这个不会被回收。总体上，vue的方式比较高效。
jquery复习
jinyuhenjianwang的博客
10-05 260
快速复习jQuery的常用知识点
2023前端面试题
m0_61043829的博客
05-10 4462
允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。1简单来说,浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。
我在乐字节学习前端的第十 一 天-最常见的20道jQuery经典面试题最常见的20道jQuery经典面试题
weixin_52392949的博客
11-30 394
jQuery 库中的 $() 是什么？（答案如下） ()函数是jQuery()函数的别称，乍一看这很怪异，还使jQuery代码晦涩难懂。一旦你适应了，你会爱上它的简洁。() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。()函数是jQuery()函数的别称，乍一看这很怪异，还使jQuery代码晦涩难懂。一旦你适应了，你会爱上它的简洁。() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上..
2024前端面试题(持续更新中～)
weixin_57844432的博客
03-16 8775
CSS3 中伪元素after和before，盒模型概念，元素居中方法，防抖和节流，深拷贝和浅拷贝，forEach用什么方法结束，怎么结束for循环的一层，forin和forof，如果要取数组第100条数据，怎么取，数组哪些方法改变原数组哪些方法不改变原数组，SSR服务端渲染流程及SEO，服务端渲染框架，前端项目中环境变量怎么处理，怎么配置，axios有封装过吗，后台管理侧边栏权限管，简述TCP/IP，UDP，对于SEO怎么优化，后台管理登录流程，解决Git冲突
jQuery面试题
Wxy_w的博客
07-29 3722
jQuery是一款非常流行的Javascript框架，如果你想要从事Web前端开发这个岗位，那么jQuery是你必须掌握而且能够熟练应用的一门技术。本文整理了一些关于jQuery的经典面试题及答案，分享给正要面试Web开发岗位的同学。 问题：jQuery的美元符号$有什么作用？ 回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码： $(document).ready(function(){ }); 当然你也可以用jQuery来代替$，如下代码：
2023常见的前端面试题（附加解答）
m0_57071129的博客
12-20 7385
（1）get请求参数要跟在url后面 安全性不高 传输数据比较小，但速度快 一般用于获取，删除（2）post请求参数会放在请求体中， 安全性相对高些 传输数据大，但相对速度慢些 post一般用于修改或者添加 事件委托原理: 事件冒泡机制（把子元素的事件行为 委托给 父级元素执行优点）优点: 1. 可以大量节省内存占用，减少事件注册 2. 可以实现当新增子对象时，无需再对其进行事件绑定缺点: 如果把所有事件都用事件代理，可能会出现事件误判 答案： （1）直接变量赋值 （2）Obje
前端面试题汇总.pdf
02-24
html+css+js+jq的基础面试题答案

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只爭朝夕不負韶華

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值