Juery入门2
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>
如果我失败了,至少我尝试过,不会因为痛失机会而后悔
浙公网安备 33010602011771号