标签:click 清空 remove 方式 span scroll white print Fix
1.Jquery操作文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"> <p>pppp</p> </div> <button id="btn1">add</button> <script src="jquery-1.12.4.min.js"></script> <script> //jquery文档处理 //内部插入 $("#btn1").click(function (){ //$(".c1").append("<h1>123</h1>"); var $ele=$("<h1>hello</h1>"); $ele.text("tang"); $ele.css("color","red"); //$(".c1").append($ele); 在元素的子元素后面添加元素 //$ele.appendTo(".c1"); //$(".c1").prepend($ele);//在元素的子元素前面添加元素 //$ele.prependTo($(".c1")) //外部插入 //$(".c1").after($ele);//兄弟标签向下插入 //$ele.insertAfter(".c1") // $(".c1").before($ele);兄弟标签向上插入 //$ele.insertBefore(".c1"); //替换 //$("p").replaceWith($ele) //删除与清空 //$(".c1").empty();//清空元素内容 //$(".c1").remove();//删除元素及元素内容 //clone 复制 var $c1=$(".c1").clone() $(".c1").after($c1); }) //外部插入 </script> </body> </html>
2.clone属性使用
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="outer"> <div class="item"> <button onclick="add(this)">+</button> <input type="text" name=""> </div> </div> <script src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> function add(self){ //var $clone_obj=$(".outer .item").clone(); var $clone_obj=$(self).parent().clone()//克隆父级item属性 $clone_obj.children("button").html("-").attr("onclick","del_obj(this)");//修改克隆父级属性下面的button内容以及添加事件 $(".outer").append($clone_obj); } function del_obj(self){ $(self).parent().remove() } </script> </body> </html>
3.Jquery模态对话框
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.content{
height: 1800px;
background-color: pink;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
//opacity 透明度
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*height: 50%*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="func(this)">show</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel(this)">show</button>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
function cancel(self) {
// $(self).parent().addClass("hide").prev().addClass("hide");
//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的。
$(self).parent().parent().children(".model,.shade").addClass("hide");
}
function func(self) {
//siblings返回所有兄弟节点
$(self).parent().siblings().removeClass("hide");
// console.log(123)
}
</script>
</body>
</html>
4.Jquery事件操作
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="jquery-1.12.4.min.js"></script> <script> //页面加载完后再执行 事件准备就绪加载方式一 $(document).ready(function(){ $("ul li").html(5); }) //事件准备就绪加载方式二 $(function(){ }) //window.onload=function(){} </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <button>add</button> <script src="jquery-1.12.4.min.js"></script> <script> /*$("doucmunet").ready()*/ //$("ul li").html(5); // $("ul li").click(function(){ // alert("666"); // }) //当script元素集合绑定事件时必须要进行循环绑定 //jquery会帮我们自动循环绑定事件 //绑定事件 // $("ul li").bind("click",function(){ // alert(123)
//只针对当前元素里的内容进行绑定,不包括DOM添加的内容
// }) //on事件维托 // $("ul").on("click","li",function(){ // alert(123)
//只要是在本元素内的元素都可以进行绑定
// }) // $("button").click(function(){ // // var $ele="<li>555</li>" // // $("ul").append($ele); // var $ele=$("<li></li>"); // var i=$("ul li").length // $ele.html((i+1)*1111); // $("ul").append($ele); // }) //解绑事件 //$("ul li").unbind("click"); </script> </body> </html>
5.JQuery--scrollTop方法
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0; } .div2{ width: 100%; height: 800px; } .div1{ height: 150px; width: 40%; background-color: yellow; overflow: auto; } .div2{ background-color: green; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: gray; color: white; text-align: center; line-height: 50px; } .hide{ display: none; } </style> </head> <body> <div class="div1"> <h1>111</h1> <h1>111</h1> <h1>111</h1> <h1>111</h1> <h1>111</h1> </div> <div class="div2"> <button onclick="returnTop()">return</button> </div> <div class="returnTop hide" onclick="returnTop()">返回顶部</div> <script src="jquery-1.12.4.min.js"></script> <script> window.onscroll=function () {
//监听垂直滚动条 // console.log($(window).scrollTop()); if($(window).scrollTop()>300){ $(".returnTop").removeClass("hide"); } else{ $(".returnTop").addClass("hide"); } } function returnTop(){ $(window).scrollTop(0) //$(".div1").scrollTop(0); } $(".div2 button").click(function(){ $(".div1").scrollTop(0) }) </script> </body> </html>
6.Jquery-拓展
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>11</p> <p>22</p> <p>33</p> <script src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> // $.each(obj,function (argument) { // // body... // }) // $("").each(function(){ // }) //添加自定义函数 //直接调用方法 // $.extend({ // Myprint:function(){ // alert("hello"); // } // }) // $.Myprint(); //先加标签再调用方法 $.fn.extend({ GetText:function(){ // console.log(this) // this再这里指的是调用对象的集合 // for (var i = 0;i<this.length;i++) { // console.log(this[i].innerHTML) // } // } // $.each($(this),function(x,y){ console.log($(y).innerHTML); }) } }) $("p").GetText() </script> </body> </html>
7.Jquery-offset方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0; } .div1,.div2{ width: 200px; height: 100px; } .div1{ border: 3px solid red; padding: 20px; background-color: yellow; } .div2{ background-color: green; position: relative; left: 20px; } .outer{ /*//position: relative;*/ } </style> </head> <body> <div class="div1">22</div> <div class="outer"> <div class="div2"></div> </div> <script src="jquery-1.12.4.min.js"></script> <script> //css操作 //offset()相对于视口的偏移量 // console.log($(".div1").offset().top); // console.log($(".div1").offset().left); // console.log($(".div2").offset().top); // console.log($(".div2").offset().left); //position():相对于已经定位的父标签的偏移量 console.log($(".div1").position().top); console.log($(".div1").position().left); console.log($(".div2").position().top); console.log($(".div2").position().left); // console.log($(".div1").height("300px"))只包括元素内容区大小 // console.log($(".div1").width()) // console.log($(".div1").innerHeight())//包括padding的大小 // console.log($(".div1").innerWidth()) // console.log($(".div1").outerWidth())//包括padding,border的大小 // console.log($(".div1").outerHeight()) </script> </body> </html>
8.JQuery动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQ动画</title> </head> <body> <p>一段文章</p> <button id="hide">hide</button> <button id="show">show</button> <script src="jquery-1.12.4.min.js"></script> <script> // $("p").html("123") //$("p").hide();//隐藏显示的元素 // $("p").show([s,[e],[fn]);显示隐藏的元素 // $("p").toggle() 如果元素是可见的,切换为隐藏的,如果元素是隐藏的,切换为可见的 /* speed * 可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" 在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。 * * $(selector).slideDown(speed,callback) * * 可选。slideDown 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 * * */ $("#hide").click(function () { $("p").slideUp(1000)//向上滑动 }); $("#show").click(function () { $("p").slideDown()//向下滑动 }) </script> </body> </html>
标签:click 清空 remove 方式 span scroll white print Fix
原文地址:https://www.cnblogs.com/tangcode/p/12005037.html