jQuery笔记

最新推荐文章于 2024-08-20 16:48:16 发布

imjustnobody

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量538

点赞数 4

文章标签： jquery javascript

本文链接：https://blog.csdn.net/imjusstnobody/article/details/115495315

版权

jQuery 入门

学习黑马程序员Pink老师的jQuery课程做的笔记，老师讲解很透彻。
这篇博客基本把讲到的知识点都记录下来了，对一些知识点做了汇总。
希望对你的学习有帮助。
欢迎点赞哦～

开始

什么是jQuery

是JavaScript 的一个库
比原生js操作简洁

jQuery的使用

官网下载jQuery文件
- 版本的区别
  - 带min的文件为压缩后的（production，不能看源码）
  - 未压缩的不带min（development，可以看源码）

引入jQuery

<script scr="js/jquery-1.12.4.min.js"></script>

jQuery的加载

Js入口函数会在DOM元素加载完毕并且图片也加载完毕之后再执行
jQuery入口函数会等到DOM元素加载完毕，但不会等到图片加载完毕再执行。

jQuery的四种入口函数

等待DOM结构渲染完毕后执行内部代码，不必等到所有外部资源加载完成

$(document).ready(function (){
        alert("hello jquery");
    })

    jQuery(document).ready(function () {
        alert("hello");
    })

//推荐，写的最少
$(function () {
        alert("hi");
})

jQuery(function () {
        alert("hi");
})

jQuery的对象

使用`$`

是jQuery的别称
是顶级对象，类似js中的window，可以调用各个方法

冲突——多库共存

原因：多个js文件都对dollar符$有定义。

解决方法:

释放使用权

jQuery.noConflict();
//1.释放操作在其他函数之前
//2.释放后不能用dollar符

修改访问符号

var sym = jQuery.noConflict();
//此时sym为新的访问符号

DOM对象和jQeury对象

定义

使用原生方法获得的对象就是DOM对象。

使用jQuery获得的是jQuery对象。本质是通过顶级对象把DOM元素进行了封装，封装成数组了。

两者的区别是jQuery对象只能使用jq的方法，相反也一样。

如何转换？

DOM->jQuery
```
$(DOM对象)
```
jQuery->DOM
```
$('div')[index];
$('div').get(index);
```

jQuery对象拷贝

$.extend([deep],target, obj, [obj_n]); 
// target 拷贝的目标对象
// obj 待拷贝对象
// deep = ture/false深浅拷贝

浅拷贝是把被拷贝对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

深拷贝时完全克隆拷贝对象而非地址，修改目标对象不会影响被拷贝对象。

jQuery选择器

基础

基本选择器，格式同CSS

$('选择器')

层级选择器

$('ul>li') // 子代选择器,只获取ul下第一层的li元素
$('ul li') // 后代选择器，获取ul下的所有li元素，包括嵌套的孙子

筛选选择器

:first //第一个元素
:last //最后一个元素
:eq(index) // 索引（从0开始）为index的元素

$('ul:first')//第一个ul元素

筛选方法

parent();
parents();// 返回祖先元素
children(selector);//子代选择器
find(selector);//相当于后代选择器
siblings(selector);//兄弟节点
nextAll();

排他思想

$(function() {
  $("button").click(function(){
      $(this).css();//对自己设置变化
  	$(this).siblings("button").css()；//给其他兄弟去掉变化
  })
})

链式编程

$(function() {
  $("button").click(function(){
  
   	$(this).css().siblings("button").css()；//对自己设置变化,给其他兄弟去掉变化
  })
})

隐式迭代

jQuery会遍历匹配的所有内部DOM元素，执行相应的方法。

$('ul li').css('background', 'red');//把ul下的所有li元素背景设为红色

jQuery样式操作

操作css方法

修改一个
```
$(this).css("属性","值")
```
修改多个

$(this).css({
  width:400,//属性为数可不加引号
  backgroundColor:"red"//复合属性改为驼峰命名
})

设置样式类

$(this).addClass("current");//添加类
$(this).removeClass("current");//删除类
$(this).toggleClass("current");//切换类,有类则移除，无类则加上

与原生js区别

// one : .one

// js
var one = document.querySelector(".one");
one.className = "two";// one : .two

// jQuery
$(".one").addClass("two");// one: .one .two

jQuery效果

可以在这里查询。

基本

show([speed, [easing], [fn]]);
hide();
toggle();

滑动

slideDown();
slideUp();
slideToggle();

淡化

fadeIn();
fadeOut();
fadeToggle();
fadeTo(透明度);//修改不透明度

自定义动画

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

其中，params为一组包含作为动画属性和终值的样式属性和及其值的集合（用对象实现）

动画队列

动画或效果触发后会一定会执行完毕，多次出发后会导致动画队列中显示效果延迟。可以使用stop()函数终止上一个动画：

$("a").stop().slideToggle();

jQuery属性操作

设置固有属性

prop();

设置自定义属性值

attr("属性");// 类似原生getAttribute()
attr("属性","属性值");// 类似原生setAttribute()

数据缓存

data()；// 存放在内存里

jQuery内容操作

设置元素内容

html("值");//包含标签，无参返回，有参数就修改

获得元素文本内容

text();//不包含标签

表单值

val();

jQuery元素操作

遍历元素

隐式迭代：对同一类元素做相同操作。如果做不同操作，需要使用遍历：

$("div").each(function (index, domEle) {xxx;})

// 也可以写成
$.each($("div").each(function (index, domEle) {xxx;}))
// 主要用于处理数据

其中：

第一个参数为索引号，名字可以自己定义；

第二个回调参数为dom元素对象

创建元素

let li = $("<li>i'm li</li>");

添加元素

内部添加

$("ul").append(li);//放到最后面

外部添加

after();
before();

删除元素

remove();// 删除匹配节点
empty();// 删除匹配节点的子节点
html("");

jQuery 尺寸方法

尺寸

width()/height();// 只算width/height
innerWidth()/innerHeight();// 包括padding
outerWidth()/outerHeight();// 包括padding和border
outerWidth(true)/outerHeight(true);// 包括padding、border和margin

位置

offset();// 设置(传递对象）或返回元素相对于文档的便宜所标，和父级没有关系
// offset有top left属性 
position();// 根据父级位置获取距离，不能设置哦
scrollTop();//获取元素被卷去的头部和左侧

jQuery事件

jQuery事件注册

element.事件(function);

只触发一次事件？

可以用

one(事件，function)；

自动触发事件

//元素.事件()
$("div").click();
// 元素.trigger("事件")
$("div").trigger("click");
// 元素.triggerHandler("事件")，不会触发元素默认行为
$("div").triggerHandler("click");

jQuery事件处理

签名

element.on(events, [selector], fn);
// events：多个事件类型，用空格隔开
// selector： 子元素选择器
// fn:回调侦听函数

常规操作

// 同一对象不同操作不同回调
$("div").on({
  mouseenter:function() {
    $(this).css("color", "red");
  },
  mouseleave:function() {
    $(this).css("color", "black");
  }
})

// 同一对象不同操作相同回调
$("div").on("mouseenter mouseleave", function(){
  $(this).toggleClass("current");
})

事件委托

原理可以看这篇文章。简单来说，就是把原来加给子元素身上的事件绑定在父元素上，就是吧事件为拍给父元素。

$("ul").on("click", "li", function(){
  alert("clicked li");
});

给动态创建的元素绑定事件

$("ol li").click(function(){
  alert("click");
});

$("ol").on("li", "click", function(){
  alert("on");
});

let li = $("<li>li create in future</li>");
$("ol").append(li);

// alert("on")可用

jQuery事件解绑

off(); // 解除所有事件
off("click"); // 只解除点击事件
off("click", "li");// 解除事件委托

jQuery事件对象

事件被触发就会有事件对象产生。

在on函数中，回调函数的参数就是事件对象。

element.on(events, [selector], funtion(event){});

事件对象有这些操作：

event.preventDefault();// 阻止默认行为
evemt.stopPropagation();// 阻止冒泡