python JQuery
#################################################
1.Jquery导入
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<!--//导入jquery模块-->
<!--jquery是一个js包，为了就是减少js的代码量-->
<script src="jquery-3.2.1.js"></script>
<script>
// $("div").css("color","red") //使用方法1
// jQuery("div").css("color","red") //使用方法2
</script>
2.Jquery选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<p id ="p1">ppp</p>
<a href=""></a>
<p>毗连选择器2</p>
<div class="outer" >outer
<div class="innter">innter111
<p>孙子</p>
</div>
<p>儿子</p>
</div>
<p>毗连选择器</p>
<div class="outer2" jack="sb" id="po">Jack</div>
<ur>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ur>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.2.1.js"></script>
<script>
//基本选择器
// $("div").css("color","red") //相当于tag
// $("**").css("color","red") //控制所有标签
// $("#p1").css("color","red") //对ID进行控制
// $(".outer").css("color","green") //对所有class标签进行控制
// $(".innter,p").css("color","pink") //混合控制标签，及class
//层级选择器
// $(".outer p").css("color","pink") //outer下的所有p标签都会变
// $(".outer>p").css("color","pink") //outer下的儿子标签p会变
// $(".outer+p").css("color","pink") //outer下紧挨的标签p会变，（毗连标签）
//基本筛选器
// $("li:eq(0)").css("color","red") //选择第一行加红，eq可以换个first
// $("li:even").css("color","red") //奇数行变色
// $("li:gt(2)").css("color","red") //大于2的变红色
//属性选择器
// $("[jack='sb']").css("color","green") // 标签等于相应属性
// $("[jack='sb'][id='po']").css("color","pink") // 两个标签属性同时满足
//表单选择器
// $("[type='text']").css("width","200px")
// $(":text").css("width","400px") //只有表单选择器可以这样简写
</script>
</body>
3.Jquery筛选器
</head>
<body>
<div>hello</div>
<p id ="p1">ppp</p>
<a href=""></a>
<p>毗连选择器2</p>
<div class="outer" >outer
<div class="innter">innter111
<p>孙子</p>
</div>
<p>儿子</p>
</div>
<p>毗连选择器</p>
<div class="outer2" jack="sb" id="po">Jack</div>
<ur>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ur>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.2.1.js"></script>
<script>
//查找筛选器
//find
// $(".outer").children("p").css("color","red") //找儿子
// $(".outer").find("p").css("color","red") //在outer下面的所有p
//下一个
// $("li").eq(2).next().css("color","red") //第2个后的li标签变红
// $("li").eq(2).nextAll().css("color","red") //第2个后的所有li标签变红
// $("li").eq(1).nextUntil("#end").css("color","red") //第2个到最后
//上一个
// $("li").eq(2).prev().css("color","red") //第2个往前一个标签变红
// $("li").eq(2).prevAll().css("color","red") //第2个往前所有的标签变红
// $("li").eq(4).prevUntil("li:eq(0)").css("color","red") //第4个往第0个，其中不包括0 4两个
//向上一层，找父亲
// console.log($(".outer .innter p").parent().html()) //第一层父亲
// $(".outer .innter p").parents().css("color","red") //从第一层父亲找到最后，
// $(".outer .innter p").parentsUntil("body").css("color","red") //从p标签往上到body变红
//上下都找
// $(".outer").siblings().css("color","red") //除了自己的.outer，其它都变红
</script>
</body>
4.二级菜单
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float:left;
background-color: #396bb3;
width:30%;
height:500px;
}
.centent{
float: left;
background-color: #84a42b;
width:70%;
height: 500px;
}
.title{
background-color: darkgoldenrod;
line-height: 30px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con ">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="centent"></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass("hide")
$(self).parent().siblings().children(".con").addClass("hide")
}
</script>
</body>
5.Jquery属性选择
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1" con="po">op</div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox" >是否可见
<input type="text"value="123">
<div value="456">99</div>
<p id="id1">ppoo</p>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//属性操作
// console.log($("div").hasClass("div11")) //判断是否有div11这个标签
// console.log($("div").attr("con")) //取con的内容
// console.log($("div").attr("con","c2")) //修改con的内容
// console.log($(":checkbox:first").attr("checked")) //checked ，attr可操作所有属性
// console.log($(":checkbox:last").attr("checked")) //undefined
// console.log($(":checkbox:first").prop("checked")) //true，可以用来操作固有属性
// console.log($(":checkbox:last").prop("checked")) //false
// console.log($("div").prop("con")) //undefined
// console.log($("div").prop("class")) //可以用来操作固有属性
// console.log($("#id1").html()) //取出p标签的内容
// console.log($("#id1").text())
// console.log($("#id1").text("<h1>jack</h1>")) //把ppoo覆盖成<h1>jack</h1>
// console.log($("#id1").html("<h1>jack</h1>")) //把ppoo 改成样式h1的样式的jack
//固有属性
// console.log($(":text").val()) //val用来取固有属性的value的值
// $(":text").val("100") //修改val的属性
$("div").css({"color": "darkorange","background-color":"#396bb3"})
</script>
#######################################
6.Juery循环
<body>
<p>oopp</p>
<p>oopp</p>
<p>oopp</p>
<script src="jquery-3.2.1.js"></script>
<script>
arr=[11,22,33];
//循环方式1
// for (var i=0;i<arr.length;i++){
// $("p").eq(i).html(arr[i]);
// }
//循环方式1
// $.each(arr,function(x,y){
// console.log(x) //取标签下标
// console.log(y) //取标签
// })
//循环方式2
$("p").each(function () {
console.log($(this))
$(this).html("hello")
})
</script>
</body>
##################################
8.用Juery使用正反选
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script src="jquery-3.2.1.js"></script>
<script>
function selectAll() {
$(":checkbox").each(function () {
$(this).prop("checked",true)
})
}
function cancel() {
$(":checkbox").each(function () {
$(this).prop("checked",false)
})
}
function reverse() {
$(":checkbox").each(function () {
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else{
$(this).prop("checked",true)
}
})
}
</script>
</body>
###########################
9.Juery文档处理
<body>
<div class="c1">
<p>PPP</p>
</div>
<button>add</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$("button").click(function () {
// $(".c1").append("<h1>hello") //方法1
var $ele=$("<h1></h1>") // 方法2，赋值变量的方式
$ele.html("Hello world!")
$ele.css("color","red")
// $(".c1").append($ele)
//内部插入
// $ele.appendTo(".c1") //放在c1下p后面
// $(".c1").prepend($ele); //放在c1下
// $ele.prependTo(".c1") //放在c1下
//外部插入
// $(".c1").after($ele) //在c1之前
// $(".c1").before($ele) //在c1之后
// $ele.insertAfter(".c1") //在c1之前
//替换
// $("p").replaceWith($ele) //将p标签替换成ele变量
//删除
// $(".c1").empty() //清空，标签还在
// $(".c1").remove() //直接删除标签
})
</script>
//10文档克隆
<body>
<div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
function add(self) {
var $clone_obj=$(self).parent().clone()
$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)")
$(".outer").append($clone_obj)
}
function remove_obj(self) {
$(self).parent().remove()
}
</script>
################################################
11.Offset
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1 ,.div2{
width:200px;
height:200px;
}
.div1{
background-color: #396bb3;
border: 3px solid rebeccapurple;
padding: 20px;
}
.div2{
background-color:darkgoldenrod;
}
/*.outer{*/
/*position: relative;*/
/*}*/
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//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()) //拿到的是内容的高度
// console.log($(".div1").innerHeight()) //拿到的是加上padding的高度
// console.log($(".div1").outerHeight()) //拿到的是加上padding和border的高度
// console.log($(".div1").height("100")) //也可以修改高度
</script>
########################################
return_top
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div2{
width:100%;
height: 800px;
}
.div1{
width:50%;
height: 500px;
background-color: #396bb3;
overflow: auto;
}
.div2{
background-color: rebeccapurple;
}
.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>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
</div>
<div class="div2" >
<button onclick="returnTop()">return</button>
</div>
<div class="returnTop" onclick="returnTop()">返回顶部</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
window.onscroll=function () {
// console.log($(window).scrollTop())
if($(window).scrollTop()>100){
$(".returnTop").removeClass("hide")
}else{
$(".returnTop").addClass("hide")
}
}
function returnTop() {
// $(window).scrollTop(0)
$(".div1").scrollTop(0) //也可以绑标签上
}
</script>
#####################################################
12.事件
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<button>add</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//事件准备加载方式1
// $(document).ready(function () {
// $("ul li").html(6)
// })
//事件准备加载方式2
// $(function () {
// $("ul li").html(7)
// })
//事件绑定方式1
// $("ul li").click(function () {
// alert(111)
// })
//事件绑定方式2,
// $("ul li").bind("click",function () {
// alert(888)
// })
//事件绑定方式终极版，（事件委托）
$('ul').on("click","li",function () {
alert(666)
})
$("button").click(function () {
var $ele=$("<li>")
var len=$("ul li").length;
$ele.html((len+1)*1111)
$("ul").append($ele)
})
// $("ul li").unbind("click") //取消绑定
</script>
#####################################
13.动画效果
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<title>Title</title>
</head>
<body>
<div>Hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
</body>
<script>
//动画效果1显示或者，隐藏效果，toggle是显示和隐藏方式结合
function f1() {
$("div").show(1000, function () { //后面加上function是回调函数
alert(666)
})
}
function f2() {
$("div").hide(1000)
}
function f3() {
$("div").toggle(1000)
}
//滑动效果2，slideDown slideUp slideToggle
//滑动效果3，fadein fadeOut fadeToggle
</script>
浙公网安备 33010602011771号