JQuery不是很详细的基础笔记

按照惯例先贴教程地址这里(jquery的内容是p62-90)

不得不说某谷真的良心,开学之后学的很多内容都是跟着学的,学校老师没法教的这么细。

因为需要尽快多学点内容,所以笔记很多东西都是直接截图的。也会省略一些已经会了的,所以具体的可以看教程

不过代码还是跟着敲了一些的,发到了个人的github上,可以康康-->这里

 

目录

1.什么是$符号

2.DOM对象和JQuery对象的区别

3.JQuery和DOM对象的相互转换

4.JQ的选择器&过滤器

4.1过滤选择器:

4,2属性过滤:

4.3表单过滤器:

4.4表单对象属性过滤器:

4.5JQ元素的筛选

JQ的属性操作

关于DOM的增删改

内部插入:

外部插入:

替换:

删除:

CSS样式操作

动画操作

基本动画:

JQ事件操作

事件的冒泡

事件对象

0.常用方法


 

1.什么是$符号

是一个函数表示是jquery。$是jq中的核心函数,可以完成很多功能,$()就是调用这个函数。

无论如何要先写

 JQuery不是很详细的基础笔记

当用这个函数时,根据参数不同我们会完成不同的操作

1.函数:相当于window.οnlοad=function(){}

2.菜蔬为HTML字符串:创建html标签对象

3.选择器字符串:查询标签

4.DOM对象:会转换为jquery对象

2.DOM对象和JQuery对象的区别

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

JQuery对象是DOM对象的数组+JQuery提供的一系列功能函数

jq对象和dom对象的方法不能相互使用

3.JQuery和DOM对象的相互转换

 JQuery不是很详细的基础笔记

4.JQ的选择器&过滤器

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

4.1过滤选择器:

 JQuery不是很详细的基础笔记

内容过滤器:

 JQuery不是很详细的基础笔记

4,2属性过滤:

 JQuery不是很详细的基础笔记

示例代码:

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

4.3表单过滤器:

 JQuery不是很详细的基础笔记

示例代码:

 JQuery不是很详细的基础笔记

4.4表单对象属性过滤器:

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

4.5JQ元素的筛选

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

示例代码:

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

JQ的属性操作

不传参数是获取传递参数是设置

html()    设置获取起始标签和结束标签中的内容        跟dom属性innerHTML一样

text()      设置获取起始标签和结束标签中的文本       跟dom属性innerText一样

val()        设置获取表单项的value属性值                    跟dom属性value一样

attr()       设置获取属性值,不推荐操作checked,readOnly,selected,disabled等

同样可以操作非标准的属性,例如自定义属性

prop()     设置获取属性值,只推荐使用attr中不推荐使用的方法

val可以同时设置多个表单相的选中状态

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

关于DOM的增删改

内部插入:

a.appendTo(b)        把a插入到b子元素末尾,成为最后一个子元素,a原来位置删除

a.prependTo(b)       把a插入到b子元素的前面,成为第一个子元素

b可以是选择器也可以是$对象

外部插入:

a.insertAfter(b)            得到ba

a.insertBefore(b)          得到ab

替换:

a.replaceWith(b)        用b替换掉一个a

a.replaceAll(b)            用 a替换掉全部b

删除:

a.remove()

a.empty()

CSS样式操作

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

动画操作

基本动画:

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

淡入淡出

 JQuery不是很详细的基础笔记

JQ事件操作

$(function(){}和window.οnlοad=function(){}

 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记 JQuery不是很详细的基础笔记

one表示绑定内容的每一个事件只能响应一次,而不是这个绑定的内容只触发一次

click函数

绑定一个回调函数

触发是指触发了一次h5的事件

 JQuery不是很详细的基础笔记

通过bind方式绑定

可以绑定多个对象,如果没有指定事件对象,我们每一个事件都是指向的同一个函数,当然我们可以使用事件对象来判断我们当前触发的是什么对象,从而进行不同操作

 JQuery不是很详细的基础笔记

live方便给动态创建的DOM对象绑定事件

 JQuery不是很详细的基础笔记

事件的冒泡

在vue中也有事件的冒泡,

如何阻止事件的冒泡?

结尾添加return false

事件对象

 JQuery不是很详细的基础笔记

可以用来判断当前是使用的什么操作

 JQuery不是很详细的基础笔记

 

0.常用方法

.css()方法,设置和获取样式

 JQuery不是很详细的基础笔记

.val()方法,可以操作表单项的value属性值,可以设置和获取(不传递参数就是获取)

 JQuery不是很详细的基础笔记

.each()方法,是jq对象提供的用来遍历元素的方法

有一个this对象,可以直接使用

 JQuery不是很详细的基础笔记