<script src="js/jq.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
$("p,span").click(function () { ... });
$(this)
// 修改内容 $("#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();//连标签一起删除
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());//离上边 })
// 查找父级元素 console.log($("li").parent()); // 查找子级元素 console.log($("#div1").children()); // 查找兄弟元素 console.log($("#p2").siblings()); // 查找后代元素 console.log($("ul").find("li"));//find必须给参数 // 查找祖辈元素 console.log($("#li3").parents());
//设置 $("#div1").css({ "height":"300px", "width":"300px", "border":"1px red solid" }); //获取 console.log($("#div1").css("border"));
// //显示 // $("#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(); });
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论