jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
load和ready的区别
jQuery基础和层级选择器
基础选择器
层次选择器
<body>
<ul>
<p>pppppp</p>
<li>
<p>li p1</p>
</li>
<li>
<p>li p2</p>
</li>
<li>
<p>li p3</p>
</li>
</ul>
<!-- 层次选择器通过DOM 元素之间的层次关系来获取元素 -->
<script src="./jquery-1.12.4.js"></script>
<script>
/* 后代选择器 */
// $('ul p').css('background','red');
/* 子级选择器 */
// $('ul > p').css('background','red');
// $('li > p').css('background','red');
/* 相邻选择器用来选取紧邻目标元素的下一个元素 */
// $('p+li').css('background','red');
/* 同辈选择器用来选取目标元素之后的所有同辈元素 */
// $('p ~ li').css('background','red');
</script>
</body>
jQuery修改样式
css方法
<style>
div{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<div id="div1">我是一个div</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 1、css方法参数只写属性名，返回属性值
console.log( $('#div1').css('backgroundColor') ); //复合属性必须用驼峰命名法
// => skyblue
// 2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是
数字可以不用跟单位跟引号
$('#div1').css('color','red');
// 3、参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性名可以不加引号
$('#div1').css({color:'white',fontSize:'20px'});
</script>
操作类
<style>
div{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: skyblue;
transition: all 1s;
}
.item{
background-color: pink;
transform: rotate(360reg);
}
</style>
<div>我是一个div</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 1、添加类方法 addClass()
$('div').addClass('item');
// 2、删除类 removeClass()
$('div').addClass('item');
// 3、切换类 toggleClass() 如果没有这个类就添加，如果有就删除
$('div').click(function(){
$(this).toggleClass('item');
})
</script>
DOM对象和jQuery对象相互转化
<div>我是一个div</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 1、DOM对象转化为jQuery对象：$(DOM对象)
var div = document.querySelector('div');
$(div);
// 2、jQuery对象转化为DOM对象（两种方式）
// (1)(jquery对象)[index] index是索引号
$('div')[0]
// (2)(jquery对象).get(index) index是索引号
$('div').get(0)
</script>
