初识jQuery
jquery是一个JavaScript代码编写的文件，可以理解为是一个js框架或者代码库。
通过jquery库可以简单快捷的对前端进行开发。
第一个jQuery代码
<script type="text/javascript">
//隐藏文档的两种方式
//1.
$(document).ready(function() {
$('div').hide();
})
//2.
$(function(){
$('div').hide();
})
</script>
$是jQuery的别称，在代码中使用其中的一种，通常使用$符号
$是jQuery的顶级对象，相当于源生js的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
DOM对象和jQuery对象
<!DOCTYPE html>
<html>
<head>
<script src="./jquery.js"></script>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<video></video>
<script type="text/javascript">
//一、DOM对象和jQuery对象的区别
//1.DOM对象：用原生js获取的对象就是DOM对象
var myDiv = document.querySelector("div");
console.dir(myDiv);
//2.jQuery对象：用jquery方式获取过来的对象时jQuery对象。本质是通过$把DOM元素进行包装
console.dir($("div"));
//3.jQuery对象只能使用jQuery方法，DOM对象只能使用原生的js属性和方法
//二、DOM对象和jQuery对象的转换
//1.DOM-->jQuery
//直接通过$符号获取
$("div");
//2.jQuery-->DOM
var myvideo = document.querySelector("video");
//(1)
$("video")[0].play();
//(2)
$("video").get(0).play();
</script>
</body>
</html>
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“ls:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的元素(从0开始) |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号为偶数的元素 |
<script type="text/javascript">
$(function() {
$("ul li:first").css("color", "skyblue");
})
</script>
jQuery筛选方法
<body>
<div class="d1">
<p>div1</p>
<div class="d2">
<p>div2</p>
<div class="d3">
<p>div3</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
console.log($(".d3").parent());
$(".d1").children("p").css("color", "skyblue");
$(".d1").find("p").css("color", "red");
})
</script>
</body>
下拉菜单示例
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
.menu {
width: 120px;
background-color: #CCC;
position: relative;
height: 26px;
}
.menu .sub {
position: absolute;
display:none;
left: 0px;
top: 26px;
background-color: #9CF;
width: 100%;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
$('.menu').mouseover(function(){
$(this).find('.sub').show();
});
$('.menu').mouseout(function(){
$(this).find('.sub').hide();
});
});
</script>
</head>
<body>
<div class="menu">
<span>按钮</span>
<dl class="sub">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</div>
</body>
</html>
jQuery的排他效果与链式编程
<body>
<button>button1</button>
<button>button1</button>
<button>button1</button>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$(this).css("background", "pink");
$(this).siblings("button").css("background", "skyblue");
})
})
两个效果类似
$(function() {
$("button").click(function() {
$(this).css("background", "pink").siblings("button").css("background", "");
})
})
</script>
</body>
jQuery修改css样式
<body>
<div></div>
<script type="text/javascript">
$(function() {
$("div").css("width", "200px");
$("div").css("height", "200px");
$("div").css("backgroundColor", "red");
})
$(function() {
$("div").css({
width: 200,
height: 200,
backgroundColor: "skyblue"
})
})
</script>
</body>
jQuery修改操作类
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<style type="text/css">
.div1 {
background-color: red;
width: 200px;
height: 200px;
}
.div2 {
background-color: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1"></div>
<script type="text/javascript">
//添加类
$("div").click(function() {
$(this).addClass("div2");
});
//删除类
$("div").click(function() {
$(this).removeClass("div1");
});
//切换类
$("div").click(function() {
$(this).toggleClass("div2");
})
</script>
</body>
</html>
jQuery效果
显示与隐藏
show(), hide(), toggle()
滑动
slideDown(), slideUp(), slideToggle()
淡入淡出
fadeln(), fadeOut(), fadeToggle(), fadeTo()
自定义动画
animate()
jQuery属性操作
<body>
<a href="http://www.baidu.com" title="test", t="t"></a>
<span></span>
<script type="text/javascript">
$(function() {
//1.元素的固有属性element.prop("属性名")
console.log($("a").prop("title"));
//2.元素的自定义属性通过attr()
console.log($("a").attr("t"));
//prop()\attr()第二个可选参数用于修改属性的值
//3.数据缓存data(),缓存在标签中，不显示
$("span").data("t", "test");
console.log($("span").data("t"));
})
</script>
</body>
jQuery内容文本值
<body>
<div>
<span>span content</span>
</div>
<input type="text" value="input content">
<script type="text/javascript">
//1.获取\设置元素内容html()
console.log($("div").html());
$("div").html("test");
2.获取、设置元素文本的内容text()
console.log($("div").text());
$("div").text("text() test");
//3.获取、设置表单值val()
console.log($("input").val());
$("input").val("val() test");
</script>
</body>
创建、添加、删除元素
<body>
<ul>ul</ul>
<script type="text/javascript">
$(function() {
//1.创建元素
var li = $("<li>li test</li>");
//2.添加元素
//(1)内部添加
$("ul").append(li);
$("ul").prepend(li);
//(2)外部添加
var div = $("<div>div test</div>");
$("ul").before(div);
$("ul").after(div);
//3.删除元素
$("ul").remove();//删除匹配到的元素
$("ul").empty();//删除匹配到元素节点的孩子
$("ul").html("");//删除匹配到元素节点的孩子
})
</script>
</body>
jQuery尺寸、位置操作
jQuery事件注册和绑定
<body>
<div style="background-color:red; width:200px; height:200px;"></div>
<script type="text/javascript">
$(function() {
//1.单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseover(function() {
$(this).css("background", "skyblue");
})
//2.事件处理 on绑定
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "red");
}
})
})
</script>
</body>