前端jQuery学习笔记

最新推荐文章于 2024-04-24 21:53:34 发布

kakai_ty

最新推荐文章于 2024-04-24 21:53:34 发布

阅读量110

点赞数

分类专栏：笔记文章标签： jquery html

本文链接：https://blog.csdn.net/qq_42059426/article/details/104742483

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jQuery-笔记

JavaScript的作用：和用户交互（事件），实现动态效果
- dom：js可以操作网页
- bom：js可以操作浏览器
js的问题：语法繁琐
- 获取标签 document.getElementById ，语法比较长
- 如果是document.getElementsByTagName…，得到一批标签对象Element
  - 要循环处理每一个Element

一、简介

1. 什么是jQuery

jQuery：是一个优秀的JavaScript轻量级框架之一。兼容CSS3和各大浏览器（兼容性好），提供了dom、events、animate、ajax等的简易操作（操作简单），还有非常丰富的插件（有写好的功能代码）。

轻量级：体积小、使用灵活、功能足够。Mybatis

重量级：体积大、使用不太灵活、功能非常强悍。Hibernate
jQuery宗旨是：write less, do more.
jQuery本质是js，但是功能更强、更简洁。

2. 下载和引入

下载：www.jquery.com
- jQuery 1.xxx：支持IE6、7、8
- jQuery 2.xxx更高版本：不支持IE6、7、8
引入：在HTML里使用标签script引入js文件

<script src="jQuery类库的路径"></script>
<script>
//使用jQuery
</script>

二、js对象和jQuery对象转换

js对象：js语法提供的对象，或者使用js方法得到的对象
jQuery对象：使用jQuery方法得到的对象

js对象转jQuery对象：$(js对象)
jQuery对象转js对象：jQuery对象[索引] 或者 jQuery对象.get(索引)

//1.1 用js方式获取d1对象--js对象：js对象不能直接使用jQuery对象的方法，但可以转换成jQuery对象再用：穿马甲 $(js对象)
var d1Js = document.getElementById("d1");
var inner = $(d1Js).html();
alert(inner);


//jquery对象都是类数组，数组里的每个元素都是js对象

//1.2 用jquery方式获取d1对象--jQuery对象：jQuery对象不能直接使用js对象的属性，但可以转换成js对象再用：脱马甲 jQuery对象[索引]
var d1Jq = $("#d1");
var inner = d1Jq[0].innerHTML;
alert(inner);

三、选择器

分析

CSS里也有选择器，用于：选择某些元素，进行样式修饰
- 基本选择器
- 层级选择器
- 属性选择器
jQuery里吸收了CSS选择器思想：选择某些元素，可以对元素做任何dom操作
- 基本选择器
- 层级选择器
- 属性选择器
- 基本过滤选择器
- 表单属性选择器
jQuery操作网页（dom操作），只需要两步：
1. 找到它：用jQuery的选择器
2. 操作它：用jQuery的dom操作方法

1. 基本选择器

CSS里的基本选择器：
- 标签选择器：div表示选择所有的div元素
- ID选择器：#d1表示选择id为d1的元素
- 类选择器：.c1表示选择类名为c1的元素（class属性值为c1的）

选择器	描述
`$("元素名称")`，比如：`$("div")`	标签选择器
`$("#id值")`，比如：`$("#d1")`	ID选择器
`$(".类名")`，比如：`$(".c1")`	类选择器
`$("selector1, selector2, ...")`，比如：`$("div,span")`	并集选择器

2. 层级选择器

选择器	描述
`$("A B")`	后代选择器，获取到A的后代元素B。比如：`$("div a")`找div的后代元素a
`$("A>B")`	子选择器，获取到A的子元素B。比如：`$("div>a")`找div的子元素a

`$("A+B")`	next选择器，获取A元素后边挨着的B元素（B是A挨着的弟弟）
`$("A~B")`	siblings选择器，获取A元素后边同级所有的B元素（B是A的弟弟妹妹们）

3. 属性选择器

选择器	描述
`$("A[attr]")`	获取含有attr属性的 A元素。`$("input[class]")`，找含有class属性的input标签
`$("A[attr=v]")`	获取 attr属性值等于v的 A元素。`$("input[type='text']")`，找文本框
`$("A[][]...")`	复合属性选择器。`$("input[class][type='text']")`，找有class属性的文本框

`$("A[attr!=v]")`	获取 attr属性值不等于v的 A元素
`$("A[attr^=v]")`	获取 attr属性值以v开头的 A元素
`$("A[attr$=v]")`	获取 attr属性值以v结尾的 A元素
`$("A[attr*=v]")`	获取 attr属性值里包含v的 A元素

4. 基本过滤选择器

通常是和其它选择器配合使用的，用于进行再次过滤

选择器	描述
`:first`	获取第一个，`$("div:first")`找第一个div
`:last`	获取最后一个，`$("span:last")`找最后一个span
`:not(selector)`	排除 selector的结果不要，`$("div:not(.cls)")`找div，但是不要.cls的
`:even`	获取索引为偶数的，`$("div:even")`
`:odd`	获取索引为奇数的
`:eq(n)`	获取索引等于n的
`:gt(n)`	获取索引大于n的
`:lt(n)`	获取索引小于n的
`:header`	获取所有的标题，h1~h6
`:animated`	获取正在运行的动画

针对前边的选择器选中的结果，进行再次过滤。比如：$("div:even")，先找到所有的div，每个div有自己的索引，获取索引为偶数的。注意：不是标签在整个页面里的索引

5. 表单属性选择器

选择器	描述
`:enabled`	获取可用的表单项
`:disabled`	获取不可用的表单项
`:checked`★★★	获取被选中的radio（单选选项），或者checkbox（多选选项）
`:selected`★★★	获取被选中的下拉选项option

基本选择器：
- 标签选择器：$("div")，获取所有div标签
- ID选择器：$("#d1")，获取id为d1的标签
- 类选择器：$(".cls")，获取类名为cls的标签
- 并集选择器：$("div, #d1, .cls") 三个选择器选中的结果，全部都要
层级选择器：
- 后代选择器：$("div span")，获取div的后代span元素（div内部所有的span）
- 子选择器：$("div>span")，获取div的子元素span
属性选择器：
- 含有指定属性的：$("div[name]")，获取含有name属性的div元素
- 指定属性值的：$("div[name='d1']")，获取name属性值为d1的div元素
- 复合属性选择器：$("div[属性1][属性2]...[属性n]")
基本过滤选择器
- 第一个：:first
- 最后一个：:last
- 排除不要：:not(selector)
- 索引为奇数的：:odd
- 索引为偶数和：:even
- 索引等于2的：:eq(2)
- 索引小于2的：:lt(2)
- 索引大于2的：:gt(2)
- 所有标题：:header
- 正在运动的动画：:animated
表单属性选择器
- 获取可用的：:enabled
- 获取不可用的：:disabled
- 获取被选中的radio/checkbox： :checked
- 获取被选中的下拉选项option：:selected
记住：基本选择器，表单属性选择器
- 其它的：练习一下（得有印象）。如果忘记了，可以查API

四、dom操作

1. 操作标签体

标签体：开始标签和结束标签中间的内容

方法	参数	描述
`html([value])`		获取/设置标签体
`text([value])`		获取/设置标签体里的文本
`val([value])`		获取/设置表单项的值

html()获取开始标签和结束标签里的所有内容；text()获取开始标签和结束标签里的文本内容
html(string)设置的html代码会生效；text(string)设置了html代码不生效

<input type="button" value="获取d1的标签体" id="btnGet">
<input type="button" value="设置d1的标签体" id="btnSet">
<div id="d1">
    <span>测试</span>
    JavaEE
</div>
<hr>
<input type="button" value="获取文本框的值" id="btn1">
<input type="button" value="设置文本框的值" id="btn5">


<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $("#btnGet").click(function () {
        //1. 获取d1的标签体所有内容：开始标签和结束标签中间的所有内容
        var v1 = $("#d1").html();
        //2. 获取d1的标签体文本内容：开始标签和结束标签中间的文本内容
        var v2 = $("#d1").text();

        alert(v1);
        alert(v2);
    });

    $("#btnSet").click(function () {
        //1. 设置d1的标签体内容：<h1>Hello Kitty</h1>。 覆盖式设置，html代码会生效
        //$("#d1").html("<h1>Hello Kitty</h1>");
        //2. 设置d1的标签体文本：<h1>Hello Kitty</h1>。覆盖式设置，html代码不生效
        $("#d1").text("<h1>Hello Kitty</h1>");
    });
    
    $("#btn1").click(function () {
        var v = $("#username").val();
        alert(v);
    });
    $("#btn2").click(function () {
        var v = $("#password").val();
        alert(v);
    });
</script>    


* 操作标签体：
  * `html()`：获取标签体
  * `html(value)`：设置标签体。是覆盖式设置，设置的html代码会生效
* 操作文本：
  * `text()`：获取文本
  * `text(value)`：设置文本。是覆盖式设置，设置的html代码不生效
* 操作表单项的值：
  * `val()`：获取表单项的值
  * `val(value)`：设置表单项的值
* 思考：如果有一个div，我要获取div里的内容，用什么方法？`val()`不行，应该使用`html() / text()`

### 2. 操作属性



| 方法                  | 参数           | 描述            |
| --------------------- | -------------- | --------------- |
| `attr(name [,value])` | name：属性名称 | 获取/设置属性值 |
| `prop(name [,value])` |                | 获取/设置属性值 |

- 建议：
  - 如果要操作的是`checked`和`selected`属性，必须使用`prop()`方法
  - 其它属性，优先使用`attr()`，如果不行，再使用`prop()`

#### 小结


### 3. 操作样式



| 方法                     | 参数           | 描述          |
| ------------------------ | -------------- | ------------- |
| `css(name [,value])`     | name：样式名称 | 获取/设置样式 |
| `addClass(className)`    |                | 添加类名      |
| `removeClass(className)` |                | 删除类名      |



### 4. 操作标签


| 方法                        | 参数                      | 描述                              |
| --------------------------- | ------------------------- | --------------------------------- |
| `$("完整html代码")`         |                           | 创建标签。`$("<li>WOW</li>")`     |
| `parent.append(element)`    | element：要插入的标签对象 | 把element作为小儿子插入进去       |
| `element.appendTo(parent)`  |                           | 把element作为小儿子插入到parent里 |
| `parent.prepend(element)`   |                           | 把element作为大儿子插入进去       |
| `element.prependTo(parent)` |                           | 把element作为大儿子插入到parent里 |
| `ele.before(element)`       |                           | 把element作为哥哥插入进去         |
| `ele.after(element)`        |                           | 把element作为弟弟插入进去         |
| `remove()`                  |                           | 删除元素                          |
| `empty()`                   |                           | 清空元素                          |

* `append(), appendTo(), preprend(), prependTo()`是剪切式移动

#### 小结

## 五、事件

### 基本事件绑定


- jQuery绝大多数的事件写法：
  - js事件名称去掉on
  - 事件变成方法
  - 响应行为作为方法的实参

| js事件写法                     | jQuery事件写法                  |
| ------------------------------ | ------------------------------- |
| `onclick`单击                  | `click(fn)`                     |
| `ondblclick`双击               | `dblclick(fn)`                  |
| `onsubmit`表单提交             | `submit(fn)`                    |
| `onchange`域内容改变           | `change(fn)`                    |
| `onfocus`获取焦点              | `focus(fn)`                     |
| `onblur`失去焦点               | `blur(fn)`                      |
| `onkeydown`键盘按键按下        | `keydown(fn)`                   |
| `onkeypress`键盘按键按下、按住 | `keypress(fn)`                  |
| `onkeyup`键盘按键弹起          | `keyup(fn)`                     |
| `onmousedown`鼠标按键按下      | `mousedown(fn)`                 |
| `onmouseup`鼠标按键弹起        | `mouseup(fn)`                   |
| `onmouseover`鼠标移入          | `mouseover(fn)`                 |
| `onmouseout`鼠标移出           | `mouseout(fn)`                  |
| `onmousemove`鼠标移动          | `mousemove(fn)`                 |
| `onload`加载完成               | `$(fn)`,`$(document).ready(fn)` |

> 什么时候需要使用页面加载完成事件？
>
> 如果js功能代码，没有在页面的最后，而又需要在加载完成之后再执行：
>
> 建议把功能代码放到页面加载完成事件的响应行为里




### 事件绑定与解绑



- 绑定事件：

  * 事件名称：不带on，比如：click, dblclick

  ```js
  $("#div1").on("click", function(){
      alert("点我干嘛");
  });
  
  //两种方式绑定事件，结果是一样的
  $("#div1").click(function(){
      alert("点我干嘛");
  });

解绑事件：
```
$("#div1").off("click");
```
注意：
- 事件名称不带on
- off函数只能解绑： jQuery方式绑定的事件

拓展：未来元素的事件

未来元素：事件绑定之后，再添加的新元素。普通方式是不能给未来元素绑定事件的

给未来元素绑定事件：jQuery对象.on("事件名称","选择器", function(){})

//给foodList清单下，所有的li绑定事件：单击弹窗（哪怕li是未来元素，仍然可以绑定成功）
$("#foodList").on("click", "li", function(){
    alert(this.innerHTML);
});

给未来元素解绑事件：jQuery对象.off("事件名称","选择器")

//要给foodList清单下，所有的li解绑事件：单击事件（哪怕是未来元素的事件，也可以解绑）
$("#foodList").off("click", "li");

六、简易动画

1. 显示/隐藏

方法	参数	描述
`show([ms[,fn]])`	ms：毫秒值；fn：函数对象	花费ms毫秒值显示完成，完成之后执行fn函数
`hide([ms[,fn]])`	ms：毫秒值；fn：函数对象	花费ms毫秒值隐藏完成，完成之后执行fn函数
`toggle([ms[,fn]])`	ms：毫秒值；fn：函数对象	切换。如果是显示的就隐藏；如果是隐藏的就显示

2. 滑动显示/滑动隐藏

方法	参数	描述
`slideDown([ms[,fn]])`		滑动显示（向下滑动）
`slideUp([ms[,fn]])`		滑动隐藏（向上滑动）
`slideToggle([ms[,fn]])`		滑动切换。如果是显示的就隐藏；如果是隐藏的就显示

3. 淡入显示/淡出隐藏

方法	参数	描述
`fadeIn([ms[,fn]])`		淡入显示
`fadeOut([ms[,fn]])`		淡出隐藏
`fadeToggle([ms[,fn]])`		淡入淡出切换。如果是显示的就隐藏；如果是隐藏的就显示

七、循环遍历

1. js的循环遍历（重点）

fori 循环

for (var i = 0; i < items.length; i++) {
    var item = items[i];
    alert(item.innerHTML);
}

for of循环★★★（ES6提供的）ECMAScript 6.0

for(var item of items){
    alert(item.innerHTML);
}

注意：
- fori和forof循环，可以循环任意能够循环的对象。

2. jQuery的循环遍历

jQuery框架的each方法

var $items = $("li"); //jQuery对象是数组，数组里每个元素都是js对象
//1. 使用jQuery框架的each方法
$.each($items, function(index, element){
    //index：当前索引； element：当前对象，是js对象
    alert("索引是：" + index + ", 当前元素内容是：" + element.innerHTML);
})

jQuery对象的each方法（每个jQuery对象都有each方法，是循环jQuery对象自己的）

var $items = $("li");
//2. 使用jQuery对象的each方法。循环jQuery对象自己的
$items.each(function(index, element){
    //index：当前索引； element：当前对象，是js对象
    alert("索引是：" + index + ", 当前元素内容是：" + element.innerHTML);
});

注意：

jQuery框架的全局each方法，可以循环任意能够循环的对象
jQuery对象的each方法，只有jQuery对象才能够使用。如果js对象想用，就必须要转换成jQuery对象

函数对象可以没有形参，使用this得到当前元素对象

$items.each(function(){
    //this：等价于element，是当前对象，是js对象
    alert("当前元素内容是：" + this.innerHTML);
});

$.each($items, function(){
    //this：等价于element，是当前对象，是js对象
    alert("当前元素内容是：" + this.innerHTML);
})

kakai_ty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端jQuery学习笔记

jQuery-笔记JavaScript的作用：和用户交互（事件），实现动态效果dom：js可以操作网页bom：js可以操作浏览器js的问题：语法繁琐获取标签 document.getElementById ，语法比较长如果是document.getElementsByTagName…，得到一批标签对象Element要循环处理每一个Element一、简介1. ...
复制链接

扫一扫