####JQuery的基本语法
<!--导入JQuery文件-->
<script src="js/jquery-3.1.1.min.js">
/*带min的是压缩后的JQuery*/
</script>
<!--JQuery文档就绪函数
文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery
$(document).ready(function(){ ---jQuery functions go here --- })
-->
<script type="text/javascript">
// hide隐藏元素
// show显示元素
$(document).ready(function(){
$('p').hide();
});
//文档就绪函数 ：简化
$(function(){
$('p').hide();
})
</script>
<body>
<p>这是p标签的第一段内容</p>
<h2>这是p标签的第二段内容</h2>
<!--<script type="text/javascript">
// hide隐藏元素
// show显示元素
$('p').hide();
</script>-->
</body>
####DOM节点操作 创建和删除
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//添加节点
var table = $("<table><tr>tr内容</tr></table>");
$("div").append(table);
})
//删除节点
$(function(){
var table = $("<table id='t'><tr>tr内容</tr></table>");
$("div").append(table);
table.remove();
//克隆
table.clone().appendTo("div");
})
</script>
<body>
<div></div>
</body>
####CSS操作 循环转播
<!--引入jquery-->
<style type="text/css">
div{
height: 300px;
300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).toggleClass('a');
//$(this).addClass('a');
}).mouseout(function(){
$(this).toggleClass('a');
//$(this).removeClass('a');
});
})
</script>
<body>
<div id="d">
sdkfjs
</div>
</body>
####CSS操作
<!--引入jquery-->
<style type="text/css">
div{
height: 300px;
300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).addClass('a');
}).mouseout(function(){
$(this).removeClass('a');
});
})
</script>
<body>
<div id="d">
sdkfjs
</div>
</body>
####通过jQuery修改CSS样式
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//一个属性
/* $("div").css('background-color','red');*/
//多个属性
$("div").css({'background-color':'red','height':'100px',"width":"50px"});
})
</script>
<div>
div中的内容
</div>
####操作元素属性
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//获取input的name属性值
/* alert($('input').attr('name'));*/
//修改input的name属性值
/* $("input").attr('name','name被修改的属性值');
$("input").attr('type','password');
$("input").attr('id','text');*/
//一次性修改以上三个内容
//修改元素的所有属性值
$("input").attr({'name':'name值','type':'password','id':'id值'})
//多个属性值一起修改，调用attr方法，把所有要修改的属性放在{ }中，属性之间用 , 分隔
//属性名与属性值之间用 : 隔开
})
</script>
<body>
<input type="text" name="ipt" value=""/>
</body>
####解决多库冲突
<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//放弃$符号
jQuery.noConflict();
jQuery("#a").html('sddsdsdfsdfs')
})
</script>
<body>
<div id="a"></div>
</body>
####JS对象与JQuery对象相互转换
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//原生的JS对象与JQuery对象不是一个概念，二者不可互相调用
var d = document.getElementById('d');
/* //JS的方式添加内容
d.innerText = '添加的内容';*/
//原生DOM（JS对象）转换为JQuery对象：$(原生对象)
$(d).html('将d放在$符号当中转换');
//JQuery方式
var d = $('#d');
//JQuery的方法调用ID为d的对象
d.html('JQuery添加的内容');
var e = $("#e");
//这个不能实现
// e.innerText('JQuery对象不能直接调用JS的原生方法');
//JQuery对象转原生对象：$(...)[0] 转原生对象用下标，只能用下标为0转换。
e[0].innerText('JQuery对象不能直接调用JS的原生方法');
//方法二： $(...).get(0)
e.get(0).innerText('通过get方法添加的内容');
})
</script>
<body>
<div id="d"></div>
<div id="e"></div>
</body>