JQuery 基本使用、操作样式、简单动画
程序员文章站
2023-12-25 23:32:33
JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ 本地文件引入:`` 在线引入:`` 选择元素 在JQ中使用选择器选择元素和在CSS中使用CSS选择 ......
jq与js
- jq是js写的插件库,就是一个js文件
- 凡是用jq能实现的,js都能实现,js能实现的,jq不一定能实现
引入
- bootcdn:https://www.bootcdn.cn/jquery/
- 本地文件引入:
<script src="js/jq.js"></script>
- 在线引入:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
选择元素
- 在jq中使用选择器选择元素和在css中使用css选择器是一样的
$("p,span").click(function () { ... });
- 方法内使用时,选择当前选中的元素,用this:
$(this)
基本使用一
- 修改内容
- html()
- text()
- jq/js对象转换
- get()/[]
- $()
- 点击事件
- 单击:click()
- 双击:dblclick()
- 鼠标滑入滑出:hover()
- 添加内容
- 前:prepend()
- 后:append()
- 添加标签
- 前:before()
- 后:after()
- 移除值
- empty()
- remove()
// 修改内容 $("#p1").html("<h1>11</h1>");//html() $("#p2").text("<h1>12</h1>");//text() //将jq对象转换为js对象 var p = $('p'); p.get(0).innerhtml=("<h1>21</h1>");//get() p[1].innertext=("<h1>22</h1>");//[] // 将js对象转换为jq对象 var sp1 = document.getelementsbyclassname('sp1'); $(sp1).text("23");//$() //单击 $("#p1").click(function () { alert("单击") }); //双击 $("#p2").dblclick(function () { alert('双击') }); // 鼠标滑入滑出 $("#p2").hover(function () { alert("鼠标滑入") },function () { alert("鼠标滑出") }); //添加内容 var p2 = $("#p2"); p2.prepend("在前==preend==");//prepend() p2.append("==append==在后");//append() //添加标签 var p1 = $("#p1"); p1.before("<p id='p0'>p1_前</p>");//before() p1.after("<p class='p'>p1_后</p>");//after() //移除 $('#p1').empty();//清空内容、标签还在 $('#p2').remove();//连标签一起删除
基本使用二
- 操作属性
- attr()
- removeattr()
- 添加/移除class属性的值
- addclass()
- removeclass()
- 判断:hasclass()
- 索引
- each()
- index()
- 滚动条事件
- scroll()
- scrolltop()
- scrollleft()
var div1 = $("#div1"); // 操作属性 div1.attr("aaa","bbb"); // alert(div1.attr("aaa"));//bbb div1.removeattr("aaa"); // 添加/移除class属性的值 div1.addclass("divclass1"); div1.addclass("divclass2");//class="divclass1 divclass2" div1.removeclass("divclass1");//class标签还在,但没有值 //判断class是否有这个值 // alert(div1.hasclass("divclass")); //遍历 each() $("ul li").each(function (i) { $(this).text("元素下标:"+i) }); //下标 index() $("li").click(function () { alert($(this).index()) }); // 滚动条事件 $(window).scroll(function () { console.log("左:"+$(document).scrollleft());//离左边 console.log("上:"+$(document).scrolltop());//离上边 })
基本使用三
- 父级元素:parent()
- 子级元素:children()
- 兄弟:siblings()
- 后代:find()
- 祖宗:parents()
// 查找父级元素 console.log($("li").parent()); // 查找子级元素 console.log($("#div1").children()); // 查找兄弟元素 console.log($("#p2").siblings()); // 查找后代元素 console.log($("ul").find("li"));//find必须给参数 // 查找祖辈元素 console.log($("#li3").parents());
操作css样式
$("..").css({...})
//设置 $("#div1").css({ "height":"300px", "width":"300px", "border":"1px red solid" }); //获取 console.log($("#div1").css("border"));
简单动画
- 隐藏: hide()
- 显示: show()
- 向上:slideup()
- 向下:slidedown()
- 取反:slidetoggle()
- 淡入:fadein()
- 淡出:fadeout()
- 自定义:fadeto()
- 取反:fadetoggle()
- 动画:animate()
- 停止:stop()
- 延迟:delay()
// //显示 // $("#btn1").click(function () { // $("#div1").show(500)//设置动画时间 // }); // // 隐藏 // $("#btn2").click(function () { // $("#div1").hide() // }); // //向上 // $("#btn1").click(function () { // $("#div1").slideup(2000);//设置动画时间 // //取反:向上完毕之后会自动返回 // // $("#div1").slidetoggle(2000); // // }); // // 向下 // $("#btn2").click(function () { // $("#div1").slidedown(); // $("#div1").slidetoggle(500);//取反 // }); // //淡入 // $("#btn1").click(function () { // $("#div1").fadein(1500);//设置动画时间 // $("#div1").fadetoggle(500);//取反 // // }); // // 淡出 // $("#btn2").click(function () { // $("#div1").fadeout(1500); // }); // // 自定义 // $("#btn3").click(function () { // // 参数:动画时间,透明度(0-1) // $("#div1").fadeto(1000,0.3); // }); //自定义动画 $("#btn1").click(function () { //动画时间3秒、延迟3秒 //完成或者停止时,3秒过后才能继续后续点击的动画操作 $("#div1").animate({ width: "600px", height: "400px", opacity: "0.3" //透明度 }, 3000).delay(3000) }); //自定义动画 $("#btn2").click(function () { //动画时间3秒、延迟2秒 //完成或者停止时,2秒过后才能继续后续点击的动画操作 $("#div1").animate({ width: "100px", height: "100px", opacity: "1" //透明度 },3000).delay(2000) }); // 停止动画 $("#btn3").click(function () { $("#div1").stop(); });
推荐阅读
-
JQuery 基本使用、操作样式、简单动画
-
php中mysql连接和基本操作代码(快速测试使用,简单方便)_PHP
-
php中mysql连接和基本操作代码(快速测试使用,简单方便)
-
JQuery对表单元素的基本操作使用总结
-
JQuery 基本使用、操作样式、简单动画
-
jQuery三组基本动画与自定义动画操作实例总结
-
jQuery使用动画队列自定义动画操作示例
-
php中mysql连接和基本操作代码(快速测试使用,简单方便)
-
jQuery中实现动画效果的基本操作介绍
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式