jQuery介绍
jQuery是一个快速、简洁的js框架,并且开源免费。 引入jq:将jq的js包放到项目的文件中,并且在需要的地方进行引入
jq的特点 1.简化dom操作 2.轻量级 3.跨浏览器
jq的基本语法
$(selector).action()
selector代表获取元素
action代表获取元素之后的操作
$代表jQuery
jq选择器
1.基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" /><br>
<span>111</span>
练习
1.引入jq,验证$是否绝对相等jQuery
2.通过dom和jq的方式获取元素
3.验证基本选择器,包括*选择器
2.层级选择器
3.基本筛选器
<span>222</span>
<p class="p1">333</p>
<p class="p1">444</p>
</body>
</html>
<script>
//id选择器
var in1 = $("#in1");
console.log(in1);
//标签选择器
var sps = $("span");
console.log(sps);
//class选择器
var ps = $(".p1");
console.log(ps);
//群组选择器
var result = $("span,#in1");
console.log(result);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<div id="div1">
<span>111</span>
<p>222</p>
<!-- <div id="div2">
<span>333</span>
<p>444</p>
</div> -->
<span>
<p>555</p>
</span>
</div>
</body>
</html>
<script>
//后代选择器
console.log($("div p"));
//子代选择器
console.log($("div>p"));
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<table border="1px" width="200px">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
</body>
</html>
<script>
//修改索引值为偶数的行为红色
$("table tr:even").css("background-color","red");
//修改索引值为奇数的行为绿色,并且字体颜色为白色
$("table tr:odd").css({"background-color":"green","color":"white"});
</script>
2.层级选择器
4.属性选择器
5.表单对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<button id="btn1">点击</button><br>
<input name="clothe" type="checkbox" checked="checked"/>T恤
<input name="clothe" type="checkbox" checked="checked"/>衬衫
<input name="clothe" type="checkbox" />牛仔裤
<input name="clothe" type="checkbox" />拖鞋
<input name="clothe" type="checkbox" />运动鞋
<input name="clothe" type="checkbox" />休闲裤
<br>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</select>
</body>
</html>
<script>
$("#btn1").click(function(){
console.log($("input[name^=clo]:checked").length)
})
$("select").mousedown(function(){
console.log($("select option:selected").html());
})
</script>
jq常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input type="text" />
<span></span>
<div id="div1"></div>
<button id="btn1">点击</button>
<img src="../img/b.png" />
</body>
</html>
<script>
$("input").keydown(function(){
$("span").html("正在输入...");
})
$("input").keyup(function(){
$("span").html("输入完成");
})
//方式一:
// $("#div1").mouseenter(function(){
// alert("鼠标移入");
// })
// $("#div1").mouseleave(function(){
// alert("鼠标移出");
// })
//方式二
$("#div1").hover(
function(){
$("#div1").css("background-color","green");
},
function(){
$("#div1").css("background-color","red");
})
//实现图片隐藏或显示
$("#btn1").click(function(){
$("img").toggle();
})
</script>
jq操作dom对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" value="aaa" />
</body>
</html>
<script>
//通过dom对象获取元素
var in1 = document.getElementById("in1");
console.log(in1);
//dom转jq
var $in1 = $(in1);
console.log($in1);
//通过jq获取元素
var $in2 = $("#in1");
console.log($in2);
//jq转dom
//方式一
var in3 = $in2.get(0);
console.log(in3);
//方式二
var in4 = $in2[0];
console.log(in4);
</script>
jq获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" value="陈森"/>
<span class="sp">我是一个span</span>
<p id="p1"></p>
<a href="www.baidu.com">百度</a>
<img src="../img/a.png" />
<div id="div1">
<p id="p2">我是一个段落</p>
<span>我是一个文本</span>
</div>
</body>
</html>
<script>
//通过dom获取input的内容
var in1 = document.getElementById("in1");
var in1Value = in1.value;
console.log(in1Value);
//通过jq获取input的内容
var $in2 = $("#in1");
var $in2Value = $in2.val();
console.log($in2Value);
//通过dom获取span的内容
var result = document.getElementsByClassName("sp");
console.log(result);
var spanStr = result[0].innerHTML;
console.log(spanStr);
var spanStr2 = result[0].innerText;
console.log(spanStr2);
//通过jq获取span的内容
var $result = $(".sp");
var $spanStr = $result.html();
console.log($spanStr);
var $spanStr2 = $result.text();
console.log($spanStr2);
//jq获取a标签的href
var aAttr = $("img").attr("src");
console.log(aAttr);
console.log("=================");
//jq获取父节点
var parents = $("#p2").parent();
var parents2 = $("#p2").parent("div");
console.log(parents);
//jq获取子节点
var childs = $("#div1").children();
console.log(childs);
//jq获取同胞节点
var sibling = $("#p1").siblings();
console.log(sibling);
</script>
jq新增节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
//dom新增节点
//创建元素节点
var p1 = document.createElement("p");
//创建文本节点
var text = document.createTextNode("我是一个段落");
//文本节点放在元素节点下面
p1.appendChild(text);
//将p标签放在div标签
document.getElementById("div1").appendChild(p1);
//jq新增节点
var sp = $("<span title='标题'>我是一个文本</span>");
$("#div1").append(sp);
</script>
jq更新节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<style>
.p2{
font-size: 25px;
font-weight: bolder;
}
</style>
</head>
<body>
<p id="p1">我是一个段落</p>
<a href="#">京东</a>
</body>
</html>
<script>
//dom
var p1 = document.getElementById("p1");
// p1.innerHTML="段落1";
p1.innerText="段落2";
// p1.style.color="red";
p1.setAttribute("class","p2");
//jq
//修改文本内容
// $("#p1").html("<a href='#'>百度</a>")html可以识别标签,text不可以
$("#p1").text("<a href='#'>百度</a>")
//修改样式
$("#p1").css("color","green");
$("#p1").css({"fontSize":"50px","fontWeight":"bolder"});
//修改属性
//https://www.jd.com/
// $("a").attr("href","https://www.jd.com/");
// $("a").attr({"href":"https://www.baidu.com","title":"百度"});
$("a").attr("style","color:pink");
</script>
jq删除节点
//dom
// document.getElementById("p1").remove();
$("#p1").remove();
jq动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<img width="200px" src="../img/b.png" />
</body>
</html>
<script>
$("#btn1").click(function(){
$("img").hide();
})
$("#btn2").click(function(){
$("img").show();
})
$("#btn3").click(function(){
$("img").toggle();
})
$("#btn4").dblclick(function(){
$("img").fadeOut("1000");
})
$("#btn5").dblclick(function(){
$("img").fadeIn("1000");
})
$("#btn6").click(function(){
$("img").animate({
width:"250px",
opacity:"0.5"
})
})
</script>
bootstrap入门
bootstrap是基于html、css、js的简洁的开源的前端框架。
bootstrap的特点: 1.移动设备优先 2.浏览器支持 3.容易上手 4.响应式开发 5.12列栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--必须要有的meta标签-->
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>入门</title>
<!--引入css-->
<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
<!--引入js,注意jq的顺序必须在bootstrap的前面-->
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<h1>hello boostrap</h1>
<h2>hello boostrap</h2>
<h3>hello boostrap</h3>
<h4>hello boostrap</h4>
<h5>hello boostrap</h5>
<h6>hello boostrap</h6>
正文内容
<p class="h1">我是一个段落</p>
<p class="lead">我是一个段落</p>
<p class="text-center">我是一个段落</p>
<p class="text-left">我是一个段落</p>
<p class="text-right">我是一个段落</p>
<p class="text-danger">我是一个段落</p>
<p class="text-warning">我是一个段落</p>
<p class="text-info">我是一个段落</p>
</body>
</html>
bootstrap栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>栅格系统</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<!---浏览器左右有间隔-->
<div class="container">
<div class="row">
<div class="col-3" style="background-color: #0000FF;">111</div>
<div class="col-6" style="background-color: green;">222</div>
<div class="col-3" style="background-color: #8A2BE2;">333</div>
</div>
</div>
<!--占满整个浏览器-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="background-color: pink;">444</div>
<div class="col-md-6" style="background-color:
yellow;">555</div>
<div class="col-md-3" style="background-color:
#0000FF;">666</div>
</div>
<!--固定布局-->
<div class="row">
<div class="col-lg col-md col-sm" style="background-color:
#002752;">777</div>
<div class="col-lg col-md col-sm" style="background-color:
#BEE5EB;">888</div>
</div>
<!--等宽布局-->
<div class="row">
<div class="col-sm" style="background-color: #008000;">999</div>
<div class="col-sm-9" style="background-color:
red;">101010</div>
<div class="col-sm" style="background-color: grey;">111111</div>
</div>
<!--自动分配-->
<div class="row">
<div class="col-4" style="background-color:
#721C24;">121212</div>
div class="col-auto" style="background-color:
#D39E00;">1313131313133131313313</div>
<div class="col-4" style="backgroundcolor:yellowgreen">141414</div>
</div>
<!--嵌套-->
<div class="row">
<div class="col-4" style="background-color:
#686868;">15151515</div>
<div class="col-8">
<div class="row">
<div class="col-4" style="background-color:
#E0A800;">16161616</div>
<div class="col-4" style="background-color:
#FFC0CB;">17171717</div>
<div class="col-4" style="background-color:
#B21F2D;">18181818</div>
</div>
</div>
</div>
<div class="row" style="height: 200px;">
<!--上边对齐-->
<div class="col align-self-start" style="background-color:
#00FF00;">模块一</div>
<!--上下左右居中对齐-->
<div class="col align-self-center" style="background-color:
#80BDFF;">模块二</div>
<!-- 下边对齐-->
<div class="col align-self-end" style="background-color:
#856404;">模块三</div>
</div>
</div>
</body>
</html>