jQuery节点和事件操作

小流江河
256 阅读4分钟

jQuery节点操作

jQuery创建和追加元素

创建元素

语法：$(标签字符串)

// 创建li标签
var $newLi = $('<li>这是新的li标签</li>')

追加元素

向父元素最后追加
语法：父元素jQuery对象.append(新创建的jQuery对象)，
语法：新创建jQuery对象.appendTo('父元素选择器'或父元素jQuery对象)
向父元素最前面追加
语法：父元素jQuery对象.prepend(新创建的jQuery对象)，
语法：新创建jQuery对象.prependTo('父元素选择器'或父元素jQuery对象)

// 向父元素最后添加子元素
$ul.append($newLi);
$newLi.appendTo('ul');
$newLi.appendTo($ul);
// 向父元素最前面添加子元素
$ul.prepend($newLi);
$newLi.prependTo('ul');
$newLi.prependTo($ul);

向元素后面追加新的兄弟
语法：jQuery对象.after(新创建的jQuery对象)
语法：新创建jQuery对象.insertAfter('选择器或jQuery对象)
向元素前面追加新的兄弟
语法：jQuery对象.before(新创建的jQuery对象)
语法：新创建jQuery对象.insertBefore('选择器'或jQuery对象)

// 向元素后面追加新的兄弟
$oldLi.after($newLi);
$newLi.insertAfter($oldLi);
// 向元素前面追加新的兄弟
$oldLi.before($newLi);
$newLi.insertBefore($oldLi);

删除和清空元素

删除元素

语法：jQuery对象.remove(); // 删除谁就让谁调用这个方法。

$oldLi.remove();

清空元素

清空方式一：jQuery对象.empty(); // 推荐使用，清空内部的所有元素及元素相关的事件
清空方式二：jQuery对象.html(''); // 仅仅清空内部的元素，不清理内存中的元素事件

$box.empty();// 推荐使用
$box.html('');

克隆元素

var newCloneLi = $oldli.clone(true);// true表示克隆内容和事件
var newCloneLi = $oldli.clone(false);// false表示只克隆内容

操作元素尺寸的方法

width()和height()

操作的大小仅仅是盒模型的内容部分，将增加或减少的值设置给了width属性

$box.width();// 获取宽度
$box.width(200);// 设置宽度，单位px
$box.height();// 获取高度
$box.height(200);// 设置高度，单位px

innerWidth()和innerHeght()

操作的大小是内容部分 + padding 整体的大小，将增加或减少的值设置给了width属性

$box.innerWidth();// 获取宽度
$box.innerWidth(200);// 设置宽度，单位px
$box.innerHeght();// 获取高度
$box.innerHeght(200);// 设置高度，单位px

outerWidth()和outerHeight()

操作的大小是内容部分 + padding + border 整体的大小，将增加或减少的值设置给了width属性

$box.outerWidth();// 获取宽度
$box.outerWidth(200);// 设置宽度，单位px
$box.outerHeight();// 获取高度
$box.outerHeight(200);// 设置高度，单位px

操作元素位置

jQuery对象.offset()方法获取的元素的位置，永远参照文档，和定位没有关系。返回的是位置对象。
jQuery对象.position()方法获取的元素的位置，参照的最近的定位元素（和定位有关系）。返回的是位置对象。

// 获取元素距离文档的位置
var $son = $(".son");
var offsetObj = $son.offset();
console.log(offsetObj);
console.log(offsetObj.left);
console.log(offsetObj.top);
// 获取元素距离上级定位参考元素的位置
var positionObj = $son.position();
console.log(positionObj);
console.log(positionObj.left);

操作滚动条卷走的距离

  • 获取：jQuery对象.scrollTop();// 返回数字
  • 设置：jQuery对象.scrollTop(数字);
// 给元素添加滚动事件
$(".box").scroll(function () {
    // 获取滚动条卷走的距离
    console.log($(this).scrollTop())
})
// 给文档设置滚动事件
$(document).scroll(function () {
    // 获取滚动条卷走的距离
    console.log($(this).scrollTop())
})
// 通过点击返回顶部按钮，将文档的卷走的距离设置为 0 
$(".backtop").click(function () {
    // 设置 scrollTop 的值
    $(document).scrollTop(0)
})

固定导航

固定导航就是给导航盒子增加一个固定定位的active类：

.active {
    position: fixed;
    top:0;
}

jQuery实现代码：

// 固定导航和返回顶部
var $box2 = $("#box2");
var $backTop = $("#backTop");
// 1.获取一下导航盒子距离文档顶部的距离
var v1 = $box2.offset().top;
// console.log(v1)
// 2.给整个文档添加滚动事件
$(document).scroll(function () {
    // 3.在事件内部判断卷走的距离是否大于等于今日团距离顶部的间距
    var v2 = $(this).scrollTop();
    if (v2 >= v1) {
        // 4.给今日团进行固定，让返回顶部按钮出现
        $box2.addClass("active");
        $backTop.show();
    } else {
        // v2 低于 v1 恢复默认
        $box2.removeClass("active");
        $backTop.hide();
    }
})

返回顶部

通过文档滚动条距离设置为0可以返回顶部，但一般我们需要一个返回顶部的动画，所以可以采用如下方法：

// 直接返回顶部
$backTop.click(function () {
    // 让页面滚动到顶部
    // 直接跳转到顶部
    $(document).scrollTop(0);
})
// 以运动方式返回顶部
$backTop.click(function () {
    // 让页面滚动到顶部
    // 滚动的元素要选择 html 或 body
    // 直接使用 document ，它是没有 scrollTop 属性的
    $("html,body").animate({"scrollTop": 0},500);
})

楼梯导航

在页面向下滑动时，超过对应的部分会显示出楼层导航部分，页面超过一个楼层，则楼层导航框自动进入下一个楼层小图标，用户点击对应楼层图标也可进行跳转。

var $lis = $(".subnav ul li");
var $jds = $(".louceng .jd");
// 使用数组存储每一层距离顶部的高度
var arr = [];
// 遍历所有的楼层，记住每一层 的 高度
$jds.each(function (i) {
  // 每一项都要存储自己的高度到数组中
  arr[i] = $(this).offset().top;
})
console.log(arr)
// 添加页面滚动事件
$(document).scroll(function () {
  // 判断卷走的距离是否大于等于第一层距离顶部的高度
  // 如果大于让侧边栏导航显示，否则隐藏
  var v = $(this).scrollTop();
  if (v >= arr[0]) {
    $(".subnav").show();
  } else {
    $(".subnav").hide();
  }

  // 在滚动过程中，需要判断处于哪个楼层
  // 让对应的导航的 li 标签高亮显示，其他的默认
  $jds.each(function (i) {
    if (v >= arr[i]) {
      $lis.eq(i).addClass("current").siblings().removeClass("current");
    } 
  })
})

// 给导航添加点击事件
$lis.click(function () {
  // 获取用户点击的楼层的下标
  var idx = $(this).index();
  // 找到对应的楼层，获取这个楼层距离顶部的高度
  var value = arr[idx];
  // 给页面添加一个运动效果，运动到指定的楼层位置
  $("html,body").animate({"scrollTop": value},500)
})

jQuery 事件操作和插件

简单方式注册事件

语法：jQuery对象.事件名(事件处理程序);

$btn.click(function () {
	// 执行内容
})

简单注册事件方法是on注册方法的再封装

on方法注册事件

注册简单事件语法：jQuery对象.on('事件名', 事件处理程序);

// 使用 on 方法注册简单事件
// on() 方法的封装的底层实际是 addEventListener()
// 多次绑定则多次执行
$("input").on("click",function () {
    alert(2)
})
$("input").on("click",function () {
    alert(3)
})

on方法实现事件委托

事件委托的实现：jQuery对象．on（'事件名', '选择器', 事件处理程序），
选择器：子孙元素
注意：在事件处理程序中，this代表的是子孙元素（最先触发的子集）

// 原生 DOM 中实现事件委托: 利用冒泡方法，减少代码书写
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e) {
    e.target.style.background = "pink";
};
// jQuery 中的事件委托
// on() 方法传递三个参数
// 参数1： 事件类型
// 参数2： 进行委托的子元素的选择器
// 参数3： 事件处理程序
$("ul").on("click", "li", function () {
    // 在事件委托过程中，事件函数的内部 this 不是指向事件源，而是指向触发事件的 委托子元素
    alert($(this).text())
})

off方法解除事件绑定

  • 解绑简单的事件：jQuery对象.off(事件类型, 事件处理程序名称）
  • 解绑事件委托注册的事件：jQuery对象.off(事件类型, '选择器, 事件处理程序名称)
// 定义事件处理函数
var fun1 = function () {
    alert(2)
}; 
var fun2 = function () {
    alert(3)
};
// 绑定简单事件
$("input").on("click",fun1)
$("input").on("click",fun2)
// 解绑事件
$("input").off("click",fun2)
var fn1 = function () {            
    alert($(this).text())
};
var fn2 = function () {            
    alert($(this).index())
};
// 绑定事件委托的事件
$("ul").on("click", "li", fn1)
$("ul").on("click", "li", fn2)
// 解绑事件委托
$("ul").off("click", "li", fn2)

触发事件

语法：jQuery对象.trigger('事件名');

$btn.trigger("click");// 不需要点击就执行点击事件

事件对象

事件处理程序中的第一个形参e就是事件对象。
原生JS中事件e存在兼容问题，jQuery中对兼容问题进行了处理，我们可以直接使用。

// 键盘按下事件中，获取键码的数字
$(document).keydown(function (e) {
    console.log(e.keyCode)
})

鼠标事件对象相关的属性：

  • 事件对象.clientX/Y 参照浏览器
  • 事件对象.pageX/Y 参照文档
  • 事件对象.offsetX/Y 参照元素 键盘事件对象相关的属性：
  • 事件对象.keyCode 返回键码数字
  • 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。检测alt/shift/ctrl是否按下（按下返回true） 公共的属性或方法：
  • 属性： 事件对象.target 最初触发事件的DOM元素
    事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
  • 方法： 事件对象.preventDefault(); 阻止默认行为
    事件对象.stopPropagation(); 阻止事件冒泡
    这些方法跟原生JS方法单词几乎是一样的。

多库共存问题

当多个库中存在$符号，就会存在多库共存的问题。有两个解决方案：
解决方案1：jQuery中不使用$，使用jQuery。
解决方案2：jQuery库释放$符合的使用权，用其他简单的符号代替。推荐使用。
jQuery.noConflict()：释放，把，把代表的函数返回给用户，用户可以用其他变量接收。

<button>按钮</button>
<!-- 引入了一个 jQ 的库 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 又引入了另一个 other 库 -->
<script src="js/other.js"></script>
<script>
  // 使用多个库
  // 问题：后面的其他库中也有 $ 的标识符
  // $("button").click(function () {
  //   alert(1);
  // })
  // console.log($)
  // 解决方法1： 使用 jQuery 标识符进行调用
  jQuery("button").click(function () {
    alert(1);
  })
  // 解决方法2：释放 $ 符号，使用$1代替
  var $1 = jQuery.noConflict();
  // console.log($1)
  $1("button").click(function () {
    alert(1);
  })
</script>

jQuery插件使用

有很多jQuery插件可以简化我们的操作，也不用我们重复造轮子。 如何获取插件：

  • 百度搜索、github搜索
  • 看技术文章
  • 跟别人交流
  • jQuery插件库之家 注意：
    1. 复制结构，保证结构关系是一致的。标签名不一致无所谓

2．样式，可以选择复制，也可以定义自己需要的样式

3．先引入jQuery文件，再引入插件库文件，再去使用

4．复制源代码或看文档使用

放大镜插件

放大镜插件

轮播图插件使用

简洁jQuery轮播图插件

avatar
文章
阅读
粉丝