jQuery基础部分笔记
发布日期:2021-11-02 02:26:39
浏览次数:17
分类:技术文章
本文共 2026 字,大约阅读时间需要 6 分钟。
jquery文档加载完再执行
将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。
可以简写为: $(function(){ … })
jquery选择器
jquery用法思想一
选择某个网页元素,然后对它进行某种操作$('#myId') //选择id为myId的网页元素$('.myClass') // 选择class为myClass的元素$('li') //选择所有的li元素$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素$('input[name=first]') // (特殊)选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素$('div').not('.myClass'); //选择class不等于myClass的div元素$('div').eq(5); //选择第6个div元素
选择集转移(了解)
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素$('#box').next(); //选择id是box的元素后面紧挨的同辈元素$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素$('#box').parent(); //选择id是box的元素的父元素$('#box').children(); //选择id是box的元素的所有子元素$('#box').siblings(); //选择id是box的元素的同级元素$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
判断是否选择到了元素
jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。var $div1 = $('#div1');var $div2 = $('#div2');alert($div1.length); // 弹出1alert($div2.length); // 弹出0......这是一个div
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值操作行间样式
(一个参数为获取) (两个参数为设置)// 获取div的样式$("div").css("width");$("div").css("color");
//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({ fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$(“div”).css(“width”),获取的是第一个div的width。操作样式类名(重点)
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClass divClass2") //移除多个样式$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
绑定click事件
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this)})
jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
animate参数: 参数一:要改变的样式属性值,写成字典的形式 参数二:动画持续的时间,单位为毫秒,一般不写单位 参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动 参数四:动画回调函数,动画完成后执行的匿名函数
$('#div1').animate({ width:300, height:300},1000,'swing',function(){ alert('done!');});
转载地址:https://blog.csdn.net/weixin_43250623/article/details/90349222 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年03月25日 15时33分12秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
2021一季度中国十大环境舒适之城,找到了
2019-04-26
pytorch中的tensorboard使用
2019-04-26
图像处理YUV的详解
2019-04-26
QT项目之文件重复检测
2019-04-26
C++学习 -3 C和C++的混合编程及库的调用
2019-04-26
基于QT的仓库礼品出入库管理(第一个给别人使用的软件)
2019-04-26
C++之调用脚本实现复制当前路径指定目录下文件到另外的地方
2019-04-26
C++学习 -2 namespace大全
2019-04-26
海思项目学习记录 -4、H.264及RTSP协议实时传输
2019-04-26
c语言——位运算符及用法
2019-04-26
java安卓开发软件及环境配置
2019-04-26
C语言数据类型的转化
2019-04-26
回顾大一
2019-04-26
英语(未完)
2019-04-26
define与const(未完待续)
2019-04-26
Eclipse的一些技巧以及快捷键(未完待续)
2019-04-26
java的基础语法(未完待续)
2019-04-26
英语小短文翻译1——The Significance of Books
2019-04-26
杂乱的Java笔记(未完)
2019-04-26