A.今天学到了什么
1.基本选择器
配置jquery
<script src="lib/jquery-3.3.1.min.js"> </script>
<!-- 1.使用本地jquery
2.使用在线cdn -->
<p id="one" class="one">hello world</p>
<script>
var one = $("#one");
// 修改元素样式
one.css({ color: "red", backgroundColor: "yellow" });
console.log(one);
$("p").click(function(){
$(this).css({color:"red"})
})
$("*").css({color:"green"})
// 选择器
/* $(“#one”) id选择器
$(“.two”) class选择器
$(“p”) 元素选择器
$(“*”) 所有的元素
$(“p,div”)
*/
</script>
2.层次选择器
<div id="parent">
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<button id="btn">btn</button>
<script>
// 层次选择器
/* $(“div >p”)
$(“div p”)
$(“div+p”)
$(“div~p”)
*/
$("#btn").click(function(){
$("#parent>p").css({color:"red"})
})
</script>
3.兄弟选择器
<div>div</div>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<script>
// $("div+p").css({color:"red"});
$("div~p").css({color:"blue"});
</script>
4.过滤选择器
A.基本过滤
$("p:first-child")
$("p:last-child")
$(“p:first”)
$(“p:last”)
:not(selector)
$(“div:not(.one)”)
$("p:even") 选择所有偶数项 从0开始
$(“p:odd”) 选择所有奇数项
$("p:eq(index)") index 从0开始
$(“p:gt(index)”) 大于
$(“p”lt(index)”) 小于
$(“:focus”) 配置focus事件
<div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<input type="text" >
</div>
$("div>p:first-child").css({color:"red"})
$("div>p:last-child").css({color:"red"})
$("p:first").css({color:"blue"})
$("p:last").css({color:"blue"})
$("p:even").css({color:"blue"})
$("p:eq(3)").css({color:"blue"})
// $("p").eq(3).css({color:"blue"})
$("p:gt(0)").css({color:"blue"})
$("p:lt(3)").css({color:"blue"})
$("input").focus(function(){
$(":focus").css({backgroundColor:"red"})
})
5.内容过滤选择器
$("p:contains(hello)") //选取文本中含有”hello”的p元素
$(“div:has(p)”) //选取含有p元素的div元素
$(“div:parent”) //选取含有子元素或者文本的元素
$(“:hidden”) 选取隐藏元素 只对dispaly：none 起作用 visibility:hidden没用
$(“div:visible”) 选取所有可见元素
<p>hello world</p>
<p>good</p>
<p>world3</p>
<div class="obe">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div>
<h1>h1</h1>
</div>
<script>
$("p:contains(hello)").css({color:"red"})
$("div:has(p)").css({color:"red"})
$("div:hidden").css({display:"block"})
</script>
6.Jquery中的DOM操作
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<p>0000</p>
</div>
<input type="text" value="hello world">
<script>
// 获取元素的文本 text 修改文本
// attr() 获取属性的值
var txt = $("li:eq(1)").text("hello world");
var attr = $("li:eq(1)").attr("class");
// console.log(attr)
// html 获取的是整个div里面的内容 包含html标签
// value 获取的是输入框的值
var html = $("div").html();
// console.log(html)
var val = $("input").val();
console.log(val);
// a.创建元素节点
var p = $("<p></p>");
// b.创建文本节点
var li4 = $("<li>04</li>")
// c.创建属性节点
var $li = $("<li title='香蕉'>香蕉</li>");
// 增加
// append 向父元素的后面添加
// prepend 向父元素的前面添加
$("ul").append($li4);
$("ul").prepend($li4) ;
</script>
7.before和after
<div>
div
</div>
<p>end</p>
<button id="btn">btn</button>
<script>
// before after 在兄弟元素之间
var $p=(" <p>one</p>")
$("div").after($p);
var $h4=$("<h4>h4</h4>")
$("p:contains(end)").before($h4);
// 删除节点 remove
$("#btn").click(function(){
$("div").remove();
})
</script>
8.属性操作
<style>
.current{
color: blue;
}
</style>
<body>
<!-- <div>hello world</div> -->
<p class="one">hello world</p>
<button>toggle</button>
<script>
// 标签的内容消失
// $("div").empty();
// var $p=("<p>replace</p>");
// 替换标签
// $("div").replaceWith($p);
// 包裹标签
// $("p").wrap("<li>li</li>");
// 在标签里面嵌套标签
// $("p").wrapInner("<li>li</li>");
// 属性操作
// 设置属性
// $("p").attr("class","two");
// 多属性操作
// $("p").attr({class:"one",tittle:"two"});
// 删除属性
// $("p").removeAttr("class");
// 样式操作
// 通过属性的方式 设置样式
// $("p").attr("class","current");
// add class
// $("p").addClass("current")
// 移出样式
// $("p").removeClass("cuurent");
// 切换样式
// $("button").click(function(){
// $("p").toggleClass("current")
// })
// 判断是否有某个样式
var one=$("p").hasClass("current");
$("button").click(function(){
if($("p").hasClass("current")){
$("p").removeClass("current")
}else{
$("p").addClass("current")
}
})
</script>
9.遍历
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="grandfather">
grandf
<div class="parent">
parent
<p>hello world</p>
</div>
</div>
<script>
// 获取子元素
// var childs=$("ul").children();
// childs.css({color:"red"});
// 找到元素的上一个元素
// $("li:eq(1)").prev().css({backgroundColor:"green"})
// 找到元素的下一个元素
// $("li:eq(1)").next().css({backgroundColor:"blue"})
// 所有的DOM元素加载完毕之后执行代码块里的js
$(function () {
// siblings 找到所有的兄弟元素
// var sibs = $("li:eq(0)").siblings();
// sibs.css({ color: "red" })
// 获取父元素
// var parent = $("p").parent();
// var parents = $("p").parents();
// parents.css({color:"red"})
// console.log(parents);
// 找到你想要的父元素
var closest= $("p").closest(".grandfather");
closest.css({color:"red"})
})
</script>
10.toggle
<div>
<p class="one">hello world</p>
</div>
<button id="btn">btn</button>
<script>
$("#btn").click(function(){
$("p").toggle();
})
</script>
11.过滤
<ul class="one">
<li class="one">1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$("li").filter(".one").css({color:"red"})
</script>
12.offset
<style>
*{margin: 0;padding: 0;}
div{
width: 100px;
height: 100px;
background: red;
margin: 100px;
}
</style>
<div>
</div>
<script>
// 偏移量
$(function(){
debugger;
var left=$("div").offset().left;
})
</script>
