#文本操作
<div>
你好天气不错哦！！！
<span>321123</span>
</div>
<input type="text">
// 引入jquery
<script src="./jquery/jquery.js"></script>
<script>
// 获取元素内容
// text() 设置或返回所选元素的文本内容 带空格换行
console.log($("div").text())
// html() 设置或者返回所选元素的内容 包含HTML标记
console.log($("div").html())
// 设置元素内容
// 设置元素的内容,text不可以解析标签,html可以解析标签
$("div").text("今天天气好不错！！")
$("div").html("<span>7758521</span>")
$("input").val("你好")
console.log($("input").val())
</script>
#attr获取属性
<div mydata="321" data-id="10"></div>
<script src="./jquery/jquery.js"></script>
<script>
// attr:attribute
// attr()获取元素属性的值
console.log($("div").attr("mydata")) // 321
console.log($("div").attr("data-id")) // 10
var div = document.querySelector("div")
console.log(div.dataset.id)
</script>
#attr设置属性
<img src="./images/02.jpg" alt="">
<button>切换</button>
<script src="./jquery/jquery.js"></script>
<script>
var flag = false
// console.log(!flag)
$("button").click(function(){
if(!flag){
$("img").attr("src", "./images/03.jpg")
}else{
$("img").attr("src", "./images/02.jpg")
}
flag = !flag
})
</script>
#attr多个属性的设置
<div>
<a href="" target="_blank">百度一下</a>
<img src="./images/03.jpg" alt="">
<button>变化</button>
</div>
<script src="./jquery/jquery.js"></script>
<script>
$("button").click(function(){
$("a").attr({
href:"http://www.baidu.com",
target:"_self"
})
})
</script>
#text的回调函数
<div>
刘德华
胡歌
刘亦菲
林志玲
</div>
<div>
刘德华
胡歌
刘亦菲
林志玲
</div>
<div>
刘德华
胡歌
刘亦菲
林志玲
</div>
<script src="./jquery/jquery.js"></script>
<script>
// 具有隐式循环效果
$("div").text(function(index,oldText){
console.log(index)
// console.log(oldText)
return oldText.replace(/刘/g,"张")
})
</script>
#元素的操作
<div class="content"></div>
<script src="./jquery/jquery.js"></script>
<script>
// 设置一个p标签
var p = $("<p>123</p>")
console.log(p)
// append() 向div里面插入元素 插入到最后
$("div").append(p)
// prepend()向div里面插入元素 插入到最前
var span = $("<span>456</span>")
$("div").prepend(span)
// after() 在div的后面插入 和div同级别
var p = $("<p>789</p>")
$("div").after(p)
// before() 在div的前面插入 和div同级别
var span = $("<span>777</span>")
$("div").before(span)
</script>
#删除被选的元素
<div>
<p>努力加油</p>
<span>我想赚钱</span>
<p class="p1">文本1</p>
<p>文本2</p>
<p class="p1">文本3</p>
<p class="p1">文本4</p>
123
<button>删除想删除的元素</button>
</div>
<script src="./jquery/jquery.js"></script>
<script>
// 删除被选元素
// $("span").remove()
// 删除被选元素的子元素文本元素也会被清空
// $("div").empty()
$("button").click(function(){
$("p").remove(".p1")
})
</script>
#class操作
<style>
.base{
width: 200px;
height: 200px;
}
.red{
background: red;
}
</style>
<div></div>
<button>切换</button>
<script src="./jquery/jquery.js"></script>
<script>
// addClass():添加一个或者多个类
$("div").addClass("base red")
// $("div").addClass("red")
// removeClass():删除一个或者多个类
// $("div").removeClass("red")
// toggleClass():切换类 如果已经拥有就删除 没有就添加
$("button").click(function(){
$("div").toggleClass("base red")
})
</script>
#css操作
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
// 操作style样式 行内式
// 给div添加背景颜色
// $("div").css("background","red")
// 如果只传递一个参数就返回它的值
// console.log($("div").css("background-color"))
// 设置多个值 使用对象的样式
$("div").css({
width:"200px",
height:"200px",
background:"red"
})
</script>
#获取元素的尺寸
<style>
div{
width: 200px;
height: 200px;
margin: 20px;
padding: 20px;
border: 20px solid red;
box-sizing: border-box;
}
</style>
<div></div>
<script src="./jquery/jquery.js"></script>
<script>
// 获取内容宽度
console.log($("div").width())
// 获取内容加内边距的宽度
console.log($("div").innerWidth())
// 获取内容加内边距加边框的宽度
console.log($("div").outerWidth())
// 获取内容加边框加内边距加外边距的宽度
console.log($("div").outerWidth(true))
</script>
#元素遍历
<div>
<span class="span1">你好</span>
<p>
<span class="span1">你好1</span>
<span class="span2">你好2</span>
<span class="span1">你好3</span>
<span class="span3">你好4</span>
</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="myli">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<span>1</span>
<span>2</span>
<span class="myspan">3</span>
<span>4</span>
<span>5</span>
<p>a</p>
<p>b</p>
<p>c</p>
<p class="myp">d</p>
<script src="./jquery/jquery.js"></script>
<script>
// 祖先元素
// parent()返回父级标签
console.log($("span").parent())
// parents()返回所有上级标签
console.log($("span").parents())
// parentsUntil()返回两个元素之间的标签
console.log($("span").parentsUntil("html"))
// 后代元素
// children()返回元素的所有直接子元素
console.log($("div").children())
// children()也可以返回元素的所有子元素类名类同一个的
console.log($("p").children("span.span1"))
// find()返回被选元素的后代元素,一路向下直到最后一个后代
// 下面的例子就是返回属于div后代的所有span元素
console.log($("div").find("span"))
// 兄弟元素
// siblings()返回元素的所有同级标签
console.log($(".myli").siblings())
// siblings()也可以返回被选元素的所有指定同级标签
console.log($(".myspan").siblings("p"))
// next()返回被选元素的下一个同级标签
console.log($(".myspan").next())
// nextAll()返回被选元素以下的所有同级标签
console.log($(".myspan").nextAll())
// nextUntil()返回被选元素和指定元素之间的所有同级元素
console.log($(".myspan").nextUntil(".myp"))
// prev()返回上一个同级标签
console.log($(".myspan").prev())
// prevAll()返回被选元素前面的所有同级标签
console.log($(".myspan").prevAll())
// prevUntil()返回被选标签和指定标签之间的所有同级标签
console.log($(".myspan").prevUntil("div"))
</script>
#元素过滤
<div>
<p>1</p>
<p class="myp">2</p>
<p class="myp">3</p>
<p class="myp">4</p>
<p>5</p>
</div>
<script src="./jquery/jquery.js"></script>
<script>
// first()返回被搜到的所有元素的第一个
console.log($("div p").first())
// last()返回被搜到的所有元素的最后一个
console.log($("div p").last())
// eq()根据传递的索引值返回相应的元素
console.log($("div p").eq(1))
// filter()根据自己规定标准返回匹配规定的元素
console.log($("div p").filter(".myp"))
// not()根据自己规定的标准返回不匹配规定的元素
console.log($("div p").not(".myp"))
</script>
