jQuery学习笔记

2401_84091468

于 2024-04-19 15:27:36 发布

阅读量319

点赞数 3

分类专栏：程序员文章标签： jquery 学习笔记

本文链接：https://blog.csdn.net/2401_84091468/article/details/137966720

版权

程序员专栏收录该内容

296 篇文章 1 订阅

订阅专栏

派发事件:

$(“选择器”).click(function(){…});

等价于:js中.dom对象.οnclick=function(){…}

常用事件:

focus:获取焦点

blur：失去焦点

submit:事件会在表单中的确认按钮被点击时发生

change: 事件会在域的内容改变时发生,常用在下拉表单中

click: 鼠标点击事件

Jquery中的效果

隐藏或展示

展示:show(毫秒数) 以右上角作为原点逐渐变大,参数是从最小变成最大所需的时间

隐藏:hide(毫秒数) 以右上角作为原点逐渐消失,参数是从最大变成最小所需的时间

滑入或滑出

向下滑入:slide [slaɪd] Down(毫秒数) 以上边框为基准向下显示,参数是全图显示完需要的时间

向上滑出:slideUp(毫秒数) 以上边框为基准向上卷,参数是全图隐藏完需要的时间

淡入淡出

淡入:fadeIn(毫秒数) 整张图像素逐渐增多,参数是像素完全显示所用的时间

淡出:fadeOut(毫秒数) 整张图像素逐渐减少,参数是像素完全消失所用的时间

选择器

基本选择器

Id:$(“#id值”)

class:$(“.class值”)

标签:$(“标签名”)

所有元素:$(“*”)

多个选择器:$(“选择器,选择器…”)用逗号隔开

设置样式:$(“选择器”).css(“值,值”);

多种选择器: $(“选择器,选择器…”).css(“值,值”);多个选择器用

层次选择器★

a b : a的所有b后代;

a>b: a的所有b儿子,不包括孙子…

a+b: a的下一个兄弟

a~b: a的所有弟弟

基本过滤选择器

:first ：第一个

:last ：最后一个

:even ：索引为偶数

:odd ：索引为奇数

:eq ：指定索引

:gt ：索引大于

:lt ：索引小于

内容过滤选择器:

:has(“选择器”) ：包含指定选择器的选择器

可见过滤选择器:

:hidden ： (不可见)在页面不展示元素一般值input type=”hidden 和样式中display

:visible ：可见的

属性过滤选择器★

[属性名]

[属性名=”值”]

表单过滤选择器

:input 所有表单子标签 input select textarea button

表单对象属性过滤选择器

:enabled 可用的

:disabled 不可用的

:checked

:selected

属性和css操作总结★★★

attr()

prop()

css()

addClass()

对属型的操作

attr() 设置或者获取元素的属性

方式1: attr (“属性名称”)

方式2: 设置一个属性 attr(“属性名称”,”值”)

方式3: 设置多个属性

attr({

“属性1”:”值1”

})

删除一个属性:removeAttr(“属性名称”):移除指定属性

注意:获取不了checked属性,需要使用prop

prop()使用方法和attr相似

添加class属性

addClass(“指定的样式值”) 等价于 attr(“class” , 注意“值”)

清除 removeClass(“class值”);

对css操作

操作元素的style属性

css():获取或者设置css样式

方式一:获取:css(“属性名”)

方式二: 设置一个属性 css( (“属性名” , ”值”)

方式三: 设置多个属性

css( {

“属性1”:”值1”

“属性2”:”值2”

})

获取元素的尺寸 width() height()

设置获取标签体内容 :

html() text()

设置的区别:

html:会把字符串解析(可以获取样式和标签)

text:只做为普通的字符串(只能将内容作为普通字符串)

获取的区别:

html:会获取内容的标签样式

text:只获取普通文本内容

使用方法:

获取

Jquery对象.html()

Jquery对象.text()

设置

jquery对象.html(“内容”)

Jquery对象.text(“内容”)

文档操作

内部插入

外部插入

a.insertAfter©

删除

empty () 清空元素

remove() 删除元素

遍历数组

方式一:jquery对象 . each ( function( index , value ){} )

方式二: $.each( jquery对象,function(index,value){})

在jquery中创建元素

$(“<标签名>”).prop(属性).html(内容)

ajax

Jquery中的ajax

Jquery对象.load ( url, params , function ( 数据) { } );

★:$.get ( url , params , function(数据) { } , type ) ;

发送get请求的ajax

url:请求的路径

params:请求的参数参数为key\value的形式key=value {“”:“”,“”:“”}

fn:回调函数参数就是服务器发送回来的数据

type:返回内容格式，xml,html, script, json, text, _default。以后用"json"

★:$.post ( url , params , function ( 数据 ) { } , type );

发送post请求的ajax

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取

讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-3d7FDeVU-1713511590219)]

结尾

资料领取方式：戳这里免费获取

html5

2401_84091468

关注

3
点赞
踩
7

收藏

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

派发事件:$(“选择器”).click(function(){…});等价于:js中.dom对象.οnclick=function(){…}常用事件:focus:获取焦点blur：失去焦点submit:事件会在表单中的确认按钮被点击时发生change: 事件会在域的内容改变时发生,常用在下拉表单中click: 鼠标点击事件Jquery中的效果隐藏或展示展示:show(毫秒数) 以右上角作为原点逐渐变大,参数是从最小变成最大所需的时间。
复制链接

扫一扫