前端学习之jquery
1. 什么是jQuery对象？
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$(“test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jqueryde基础语法：$(selector).action()2.寻找元素（选择器和筛选器）
2.1 选择器
2.1.1基本选择器
$("*") $("#id") $(".class") $(".class,p,div") 2.1.2 层级选择器
$(".out div")#后代选择器 $(".out>div")#子代选择器
$(".out+div") #毗邻选择器（紧邻下一个选择器） $(".out~div")兄弟元素选择器
2.1.3 基本筛选器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为基数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下表小于2的li2.1.4 属性选择器
<div alex="sb">alex</div>
$("[alex='sb']").css("color","green")
2.1.5表单选择器
<input type="text" value="">
$(":text").css("border","2px solid green") $("[type='text']")-----$( ":text") 注意只适用于input标签：$("input:checked")
2.2 筛选器
2.2.1过滤选择器（重点）
$("ul li").eq(2).css("color","green") //推荐使用
$("ul li").first().css("color","yellow")
console.log($("ul li").hasClass("item")) //true2.2.2查找筛选器
//孩子组
$(".div1").children(".div2").css("color","red")//children(找子代（儿子层）)
$(".div1").find("p").css("color","yellow") //find（找后代（儿子跟孙子层）） //兄弟组（next）
$(".div2").next(".p2").css("color","red") //下一个兄弟标签
$(".div2").nextAll().css("color","yellow") //找全部兄弟标签
$(".div2").nextUntil("a").css("color","red") //（开区间，取中间部分） //兄弟组（prev）
$("a").prev(".p2").css("color","red")
$("a").prevAll().css("color","red")
$("a").prevUntil().css("color","green") //父亲组（parent）
$(".test").parent() $(".test").parents() $(".test").parentUntil() //所有的兄弟除了自己本身（siblings）
$(".p2").siblings().css("color","green")
3 操作元素（属性）
对于属性操作：attr：操作自定义属性
prop：操作固有属性
prop（“属性名”） --------取值
prop（“属性名”，属性值） ------赋值 $("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
<style>
.menu{
height: 500px;
width: 30%;
background-color: #e0e0e0;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;} .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>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>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></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>
左侧菜单