基础语法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello div</div>
<a href="">走你</a>
<p id="p1" age = 18>ppp1</p>
<p id="p2" age = 18>ppp2</p>
<div class="outer">outer
<div class="inner">inner
<p>inner p</p>
</div>
<p>harvey</p>
</div>
<div class="outer2">Y</div>
<p>哈哈</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 基本选择器
// $('div').css('color','red'); //通过标签名选择
// $('*').css('color','red'); //所有标签变红色
// $('#p1').css('color','red'); //通过id选择
// $('.outer').css('color','red'); //通过class选择
// $('.inner,p').css('color','red');//可以批量选择
// 层级选择器
// $(".outer p").css("color","red"); //选择所有p标签后代
// $(".outer>p").css("color","red"); //只选择下一代的p标签
// $(".outer+p").css("color","red"); //选择紧挨着的p标签(同级)
// $(".outer~p").css("color","red"); //选择下边的所有p标签(同级)
// 基本筛选器
// $("li:first").css("color","red"); //筛选第一行li标签
// $("li:eq(0)").css("color","red"); //类似索引的方式筛选
// $("li:gt(2)").css("color","red"); //类似索引,匹配第2个(不包括第2个)以后的所有li标签
// $("li:lt(2)").css("color","red"); //类似索引,匹配第2个(不包括第2个)以前的所有li标签
// 属性筛选器
$("[age = 18][id = 'p1']").css('color','red'); //匹配自定义的属性
// 表单筛选器
$("[type='text']").css("width","200px");
$(":text").css("width","400px"); //注意,只有input标签的type属性可以用此方法简写
</script>
</body>
</html>
基础语法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello div</div>
<a href="">走你</a>
<p id="p1" age = 18>ppp1</p>
<p id="p2" age = 18>ppp2</p>
<div class="outer">outer
<p>harvey</p>
</div>
<div class="outer2">Y</div>
<p>哈哈</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//筛选器
// $("li").eq(2).css("color","red"); //建议用此方法,跟标签名分离,不写死
// $("li").first().css("color","red"); //第一个li标签
// $("li").last().css("color","red"); //最后一个li标签
// $(".outer").children("p").css("color","red"); //只匹配下一代
// $(".outer").find("p").css("color","red"); //匹配所有后代p标签
// $("li").eq(2).next().css("color","red"); //匹配索引为2的下一个li标签
// $("li").eq(2).nextAll().css("color","red"); //匹配索引为2的之后的所有li标签
// $('li').eq(4).prevAll().css('color','red'); //匹配索引为4的之前的所有li标签
// $("li").eq(4).prevUntil("li:eq(0)").css("color","red");//匹配索引为4之前一直到索引为0时停止([0]不匹配)
// console.log($(".outer .inner p").parent().html());//inner <p>inner p</p> 拿到父级标签打印父级标签的内容
// $(".outer .inner p").parents().css("color","red");//无上限找父级标签,能找到最外层,一般不用
// $(".outer .inner p").parentsUntil("body").css("color","red");//可以限制不让他无限找,此处限制到body
$(".outer").siblings().css("color","red");//上下找兄弟,除了自己其他同级全匹配
</script>
</body>
</html>
菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 800px;
width:100%;
}
.menu{
float: left;
background-color: dodgerblue;
width: 30%;
height: 500px;
}
.content{
float: left;
background-color: rebeccapurple;
width: 70%;
height: 500px;
}
.title{
background-color: aquamarine;
line-height: 40px;
}
.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="content"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function show(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>
属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
<input type="text" value="123">
<div value="456"></div>
<div id="id1">
uuuuu
<p>ppppp</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// console.log($("div").hasClass("div11"));//false 判断是否有此标签
// console.log($("div").attr("con")); //c1,attr可以查看自定义属性
// console.log($("div").attr("con","c2"));
// console.log($("div").attr("con")); //c2,attr可以修改值
//
// console.log($(":checkbox:first").attr("checked"));//checked
// console.log($(":checkbox:last").attr("checked")); //undefined,原有属性没有声明是无法被attr找到的
// console.log($(":checkbox:first").prop("checked"));//true,直接返回布尔值
// console.log($(":checkbox:last").prop("checked")); //false,prop方法可以查找没有被声明的固定属性
//
// console.log($("div").prop("con"));//undefined,prop方法不能操作自定义属性
// console.log($("div").prop("class"));//div1,可以操作原有属性
//
// console.log($("#id1").html());// uuuuu <p>ppppp</p>
// console.log($("#id1").text());// uuuuu ppppp
// console.log($("#id1").html("<h1>YUAN</h1>"));//<div id="id1"><h1>YUAN</h1></div>
// console.log($("#id1").text("<h1>YUAN</h1>"));//<div id="id1"><h1>YUAN</h1></div>,纯文本,无渲染
//原有属性
console.log($(":text").val());//123,拿到value
console.log($(":text").next().val());//自定义的value拿不到
$(":text").val("789");
console.log($(":text").val());//789,覆盖
//css控制多个属性
$("div").css({"color":"red","background-color":"green"})
</script>
</body>
</html>
循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>123</p>
<p>456</p>
<p>789</p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
arr = [11,22,33];
//循环方法一
$.each(arr,function (x,y) {
console.log(x);//x为索引
console.log(y);//y为索引对应的值
});
//循环方法二
$('p').each(function () { //这样就已经自动循环了
console.log($(this)); //三个p标签对象拿到了
$(this).html("hello");//p标签内容修改为三个hello
})
</script>
</body>
</html>
正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="selectAll();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.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>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function action1(self) {
$(self).parent().siblings().removeClass('hide');
}
function action2(self) {
$(self).parent().parent().children('.shade,.models').addClass('hide');
//or $(self).parent().addClass("hide").prev().addClass("hide");
}
</script>
</body>
</html>
增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>PPP</p>
</div>
<button>add</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('button').click(function () { //唯一的不同就在不需要onclick
var $ele = $('<h1></h1>');
$ele.html('hello world');
$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 $ele2= $(".c1").clone();
// $(".c1").after($ele2)
})
</script>
</body>
</html>
clone,复制标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function add(self) {
//var $copy1 = $(".item").clone();//用此方法找到的标签是包括之前的所有item,会累加,不会一次只添加一个
var $copy1 = $(self).parent().clone();//拷贝,这样每次只拷贝自己的父标签
$('.outer').append($copy1); //添加
//加一个方法,删除。复制原来的button并修改内容'+'变为'-',且设置onclick的值为remove_obj()
$copy1.children('button').html('-').attr('onclick','remove_obj(this)');
}
function remove_obj(self) {
$(self).parent().remove(); //老规矩,先找到父标签然后移除该标签
}
</script>
</body>
</html>
offset()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2{
width: 200px;
height: 100px;
}
.div1{
border:5px solid red;
padding: 20px;
margin: 2px;
background-color: aliceblue;
}
.div2{
background-color: rebeccapurple;
}
*{
margin: 0px;
padding:0px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//offset()相对于视口的偏移量
console.log($(".div1").offset().top); //2
console.log($(".div1").offset().left);//2
console.log($(".div2").offset().top); //154
console.log($(".div2").offset().left);//0
//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").innerHeight()); //查看的是内容+padding的大小
console.log($(".div1").outerHeight()); //查看的是内容+padding+border的大小
console.log($(".div1").outerHeight(true));//查看的是内容+padding+border+margin的大小
</script>
</body>
</html>
滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div2{
width: 100%;
height: 800px;
}
.div1{
width: 40%;
height: 150px;
background-color: antiquewhite;
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>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
</div>
<div class="div2">
<button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
window.onscroll = function () { //监听滚轮位置的函数。只要滚轮动了就运行
if($(window).scrollTop()>300){
$(".returnTop").removeClass("hide")
}else {
$(".returnTop").addClass("hide")
}
};
function returnTop() {
$(window).scrollTop(0);
}
$(".div2 button").click(function () {
$(".div1").scrollTop(0)
})
</script>
</body>
</html>
事件绑定、委托、准备加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//将js/jQuery代码放在html代码上边会无效,用此方法可以将js代码的执行放在html之后,相当于onload
// 事件准备加载方式一
// $(document).ready(function () {
// $("ul li").html(5);
// });
// 事件准备加载方式二
// $(function () {
// $("ul li").html(5);
// });
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<button>add</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//事件绑定简单形式,js必须要遍历才可以实现
// var eles=document.getElementsByTagName("li")
// eles.onclick=function () {
// alert(123)
// }
// $('ul li').click(function () { //完整版 $("ul li").bind("click",function () {
// alert(666)
// });
//$("ul li").unbind("click") //解除绑定事件
$('button').click(function () {
var $ele = $('<li>');
var len = 4;
$ele.html(len + 1);
$('ul').append($ele);
});
//事件委托(事件绑定高级版),用on可以设定父标签,好处是如果后来添加新的li同样可以绑定事件
$('ul').on("click","li",function () {
alert(999);
});
</script>
</body>
</html>
动画效果1,show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script>
function f1() {
$('div').show(1000,function () {
alert('show')
})
}
function f2() {
$('div').hide(1000,function () {
alert('hide')
})
}
function f3() {
$('div').toggle(1000);
}
</script>
</body>
</html>
动画效果2,slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#content{
text-align: center;
background-color: dodgerblue;
border: solid 1px aquamarine;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">切换</div>
<div id="content">hello world</div>
<script>
$(document).ready(function () {
$('#slideDown').click(function () {
$('#content').slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
});
});
</script>
</body>
</html>
动画效果3,fade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=""https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(2000);
});
$("#out").click(function(){
$("#id1").fadeOut(2000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(2000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,1);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>
panel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 200px;
position: absolute;
}
.title{
background-color: black;
height: 50px;
width: 500px;
line-height: 50px;
text-align: center;
color: white;
}
.content{
width: 500px;
height: 150px;
background-color: antiquewhite;
}
</style>
<script>
$(function () {
$(".title").mouseover(function () {
$(this).css("cursor","pointer");
}).mousedown(function (e) {
var eve = e || window.event;
// 原始鼠标横纵坐标位置
var old_m_x=eve.clientX;
var old_m_y=eve.clientY;
// console.log(old_x);
// console.log(old_y);
var old_box_y=$(this).parent().offset().top ;
var old_box_x=$(this).parent().offset().left ;
$(this).bind("mousemove",function (eve) {
var new_m_x=eve.clientX;
var new_m_y=eve.clientY;
var m_x=new_m_x-old_m_x;
var m_y=new_m_y-old_m_y;
//$(".box").css({"top":old_box_y+m_y+"px","left":old_box_x+m_x+"px"})
var x = old_box_x + m_x;
var y = old_box_y + m_y;
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
})
}).mouseout(function(){
$(this).unbind('mousemove');
})
</script>
</head>
<body>
<div class="box">
<div class="title">标题</div>
<div class="content">内容</div>
</div>
</body>
</html>
拓展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>1p</p>
<p>2p</p>
<p>3p</p>
<script>
// $.each(obj,function () {
//
// });
// $('').each(function () {
//
// })
$.extend({
Myprint:function () {
console.log('hello')
}
});
$.Myprint(); //此时可以调用了
$.fn.extend({
Gettext:function () {
// 可以自定义循环不用内置的each()
for(var i = 0;i<this.length;i++){
console.log(this[i].innerHTML)
}
$.each($(this),function (x,y) {
//console.log(y.innerHTML)
// console.log($(y).html())
})
}
});
$('p').Gettext()
</script>
</body>
</html>