jQuery的基本使用

MyDreamingCode

已于 2022-02-28 21:28:24 修改

阅读量1.5k

点赞数 1

分类专栏： javascript 文章标签： jquery javascript

于 2022-02-18 17:01:07 首次发布

本文链接：https://blog.csdn.net/qq_61706112/article/details/123000884

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、 jQuery对象与DOM对象

DOM对象：原生js获取的对象

jQuery对象：用jQuery方法获取的对象

注意：

1. jQuery对象只能使用jQuery方法，DOM对象只能使用原生js提供的方法

2. jQuery对象与DOM对象的相互转换：

（1）DOM转换为jQuery对象：$(DOM对象)

var newli = document.querySelector('li');
$(newli);

（2）jQuery转换为DOM对象：$(DOM对象)

$(DOM元素)[index] 或者 $(DOM元素).get(index)

$('.input')[0]; //方法一
$('.input').get(0) //方法二

二、相关操作

1. 入口函数

原生：window.addEventListener('DOMContentLoaded',function(){})

现在：$(function(){})或$(document).ready(function(){}) 即等DOM结构渲染完毕后就执行

2. 设置样式

$('div').css('属性名','属性值')

注意：

（1）jQuery的隐式迭代：遍历匹配到的所有元素，即不需要我们再进行手动循环

（2）多个样式：$('div').css({width:200, height:200, backgroundColor:'blue'})

example:

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .nav li {
    float: left;
    width: 100px;
    text-align: center;
    list-style: none;
    cursor: pointer;
  }
  .nav ul{
    display: none;
  }
  .nav ul li:hover {
    background-color: #ccc;
  }
</style>

<body>
  <ul class="nav">
    <li>微博1
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博2
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博3
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
  </ul>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $('.nav>li').mouseover(function(){
      $(this).children('ul').show();
    })
    $('.nav>li').mouseout(function(){
      $(this).children('ul').hide();
    })
  </script>
</body>

3. 筛选选择器

$('li:first') - 取第一个li元素

$('li:last') - 取最后一个li元素

$('li:eq(2)') - 取索引号为2的li元素

$('li:odd') - 取索引号为奇数的li元素

$('li:even') - 取索引号为偶数的li元素

$('.checkinput:checked') - 被选中的复选框（可带length）

一些方法：

$('li').parent() - 查找父级

$('div').parents('选择器') - 查找指定的祖先元素

$('div').children('p') - 查找子集

$('ul').find('li') - 查找ul里面的li，即后代选择器

$('li:first').siblings('li') - 查找兄弟结点

$('li:first').nextAll() - 查找当前元素之后的所有同辈结点

$('li:last').prevAll() - 查找当前元素之前的所有同辈结点

$('li').eq(2) - 查找索引号为2的li元素

$('div').hasClass('current') - 判断div是否有current这个类名

$(this).index() - 获取当前索引号

ps: .toFixed(2) - 小数点后保留两位小数

4. 添加/删除/切换类

$('div').addClass('current'); -- 添加

$('div').removeClass('current'); -- 删除

$('div').toggleClass('current'); -- 切换

三、jQuery效果

1. 显示/隐藏

（1）show 显示 ([speed, [easing], [fn]])

speed：slow、normal、fast、值(毫秒数)

easing：swing（慢-快-慢）、linear（匀速）

fn：回调函数，动画完成时执行

（2）hide 隐藏同 show

（3）toggle 切换同 show

2. 滑动

（1）slideDown 下滑 ([speed, [easing], [fn]])

（2）slideUp 上滑参数同上

（3）slideToggle 切换参数同上

3. 事件切换

hover([over], out)

over：鼠标移到元素上时触发的函数

out：鼠标离开元素时触发的函数

注意：如果只写一个函数，则鼠标经过和离开都会触发这个函数，可以配合toggle方法使用

<body>
  <ul class="nav">
    <li>微博1
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博2
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博3
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
  </ul>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $('.nav>li').hover(function(){
      $(this).children('ul').slideToggle();
    })
  </script>
</body>

注意动画队列：即多次触发，会有多个动画排队现象出现

可以停止排队，使用stop() --stop()需写到要执行的动画前面

$('.nav>li').hover(function(){
  $(this).children('ul').stop().slideToggle();
})

4. 淡入淡出

（1）fadeIn 淡入 ([speed, [easing], [fn]])

（2）fadeOut 淡出参数同上

（1）fadeToggle 切换参数同上

（1）fadeTo 调整透明度 ([[speed], opacity, [easing], [fn]])

注意：opacity与speed必须写，其他参数同上

5. 自定义动画

animate(params, [speed], [easing], [fn])

params：样式属性（必须写，并以对象的形式传送）其他参数如上

<script>
  $('div').animate({
    left:300,
    top:100
  },300)
</script>

PS手风琴操作：

ul>li*n 每个li设置较短的宽度（加上overflow:hidden），当鼠标移入到某个li时，当前li的宽度需要增加到图片的正常宽度，而此li的兄弟结点的宽度变为较短宽度。可以使用fadeIn与fadeOut再加上animate({width:xx})来完成手风琴效果，注意每个jQuery效果前最好都加上stop()防止动画队列中出现多个动画。

四、对元素的操作

1. 遍历对象

方法一：$('div').each(function(index, documentElement) {....})

（1）index -- 索引号

（2）documentElement -- DOM元素对象

（3）适用于遍历DOM对象

方法二：$.each(object, function(index, documentElement) {....})

（1）object 如：$('div')

（2）适用于遍历数组、对象：
var arr = ['red', 'blue', 'yellow'];
$.each(arr, function(i, elem) {
  console.log(i,elem);
})

2. 创建、添加和删除元素

（1）创建元素

var p = $("<p>我是创建的p</p>")

（2）添加元素

$("div").append(p) - 放到div内部元素的最后面

$("div").prepend(p) - 放到div内部元素的最前面

$("div").after(p) - 放到原来div的后面

$("div").before(p) - 放到原来div的前面

（3）删除元素

$("div").remove() - 删除div元素

$("div").empty() - 删除div的所有子节点

$("div").html("") - 将里面的内容清除（即子节点也没了）

五、jQuery 尺寸以及位置

Size

1. width()、height() -- 得到或修改元素的宽、高

2. innerWidth()、innerHeight() -- 得到加了padding的宽、高

3. outerWidth()、outerHeight() -- 得到带有padding与border的宽、高，若在括号内加上true则会加上margin值

Location

1. offset() -- 返回或修改元素距离文档的偏移坐标值（对象），与父级元素无关

若要修改：offset({top:100,left:200})

2. position() -- 返回与父亲定位有关的偏移坐标值（对象），不能设置

3. scrollTop() / scrollLeft() -- 返回元素被卷去的头部或左侧，animate中也可以有scrollTop

六、on()绑定事件

element.on(events, [selector], fn) -- 可以绑定多个处理事件

1. events：事件类型（用对象形式）

2. selector：子元素选择器，可以实现事件委托

例子：

$("div").on({

mouseenter: function() {alert(123);},

click:function(){console.log(111)}

})

$("div").on("click", "p", function() {alert(123);}) -- div为p的父元素。可以冒泡

注意：

1. 若处理事件相同

$("div").on("mouseover mouseout", function() {$(this).toggleClass("red");})

2. on()可以给动态生成（比如后来生成的）的元素绑定事件

七、off()解绑事件

可移除由on创立的事件

1. $("div").off() -- 将div身上所有的事件都解绑

2. $("div").off("mouseover") -- 只解除div身上的mouseover事件

3. $("div").off("click","p"); -- 解除委托事件（div为p的父元素）

注意：用one()来绑定事件 -- 事件只触发一次，用法与on相似

八、自动触发事件trigger()

1. element.event();

2. element.trigger("event");

3. element.triggerHandler("event"); -- 特殊：不会触发元素的默认行为

九、jQuery拷贝对象

$.extend([deep], target, object1, [objectN])

1. deep：若设置为true则为深拷贝，默认为false，浅拷贝

2. target：需要拷贝的目标

3. object1：待拷贝到第一个对象的对象

注意：

1. 浅拷贝：将复杂对象的地址拷贝过去，target有而object1没有的数据会被覆盖掉，这样一修改数据，被拷贝对象的数据也会跟着变。

2. 深拷贝：拷贝的对象，而不是地址，target有而object1没有的数据继续保留。修改数据，被拷贝对象的数据不会跟着改变。

MyDreamingCode

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery的基本使用

一、 jQuery对象与DOM对象DOM对象：原生js获取的对象jQuery对象：用jQuery方法获取的对象注意：1. jQuery对象只能使用jQuery方法，DOM对象只能使用原生js提供的方法2. jQuery对象与DOM对象的相互转换：（1）DOM转换为jQuery对象：$(DOM对象)var newli = document.querySelector('li');$(newli);（2）jQuery转换为DOM对象：$(DOM对象) $(...
复制链接

扫一扫