jQuery的优点
1.轻量级。核心文件才几十kb，不会影响页面加载速度。
2.跨浏览器兼容，基本兼容了心在主流的浏览器。
3.链式编程、隐式迭代。
4.对事件、样式、动画支持，大大简化了DOM操作。
5.支持插件扩展开发。有着丰富的第三方的插件，例如:树形菜单、日期控件、轮播图等。
6.免费、开源。
jQuery入门
如何书写js代码
<!-- 引入JQ的类库文件 -->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
var a1=$("#d1")//获取元素
console.log(a1)
console.log(a1.text())//使用JQ对象的方法获取元素的文本内容
console.log(a1[0].innerText)//使用JQ对象转换为DOM对象 获取文本内容
console.log("------------------")
var d1=document.getElementById("d1")//根据id获取元素
console.log(d1.innerText)//使用DOM对象获取元素文本内容
console.log($(d1).text())//把DOM对象转换为JQ对象
var a2=$(".c1")//获取class元素
console.log(a2)
var a3=$("p")//获取标签元素
console.log(a3)
})
</script>jQuery的入口函数
jQuery中常见的两种入口函数:
//第一种：简单易用
$(function(){
...//此处是页面DOM加载完成的入口
});
//第二种:繁琐，但是也可以实现
$(document).ready(function(){
...//此处是页面DOM加载完成的入口
});总结：
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。
jQuery中的顶级对象$
1.$是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$。
2.$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
jQuery对象和DOM对象
使用jQuery方法和原生js获取的元素是不一样的，总结如下:
1.用原生JS获取来的对象就是DOM对象
2.jQuery方法获取的元素即使jQuery对象。
3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式储存)。
注意：
只有jQuery对象才能使用jQuery方法，DOM对象则使用原生的JavaScript方法。
jQuery可以通过哪几种方式获取
<script>
$(function(){
//JQ的ID选择器
var d1=$("#d1");
console.log(d1.text());
//JQ的class选择器
var c1=$(".c1");
console.log(c1.text());
//JQ的标签选择器
var p=$("p");
console.log(p.text());
//层级选择器
var li=$("ul>li");
li.css("color","red");
});
</script>属性选择器
属性选择器是制定DOM元素对应属性的一种选择器
| 名称 | 用法 | 描述 |
| 属性名称选择器 | $("A[属性名]") | 包含指定属性的选择器 |
| 属性选择器 | $("A[属性名='值']") | 包含指定属性等于指定值的选择器 |
| 复合属性选择器 | $("A[属性名='值'][]...") | 包含多个属性条件的选择器 |
过滤选择器
筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下：
| 语法 | 用法 | 描述 |
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
表单过滤选择器
在表单元素中，针对不同的表单元素状态jQuery提供的表单过滤选择器
| 名称 | 用法 | 描述 |
| 可用元素选择器 | :enabled | 获得可用元素 |
| 不可用元素选择器 | :disabled | 获得不可用元素 |
| 选中选择器 | :checked | 获得单选/复选框选中的元素 |
| 选中选择器 | :selected | 获得下拉框选中的元素 |
如何进行表单切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#yf ul li {
list-style: none;
/* border: 1px solid yellow; */
margin: 0px auto;
}
#yf ul{
width: 100px;
height: 250px;
/* border: 1px solid rebeccapurple; */
margin: 0px auto;
}
#yf ul li a {
display: inline-block;
width: 80px;
height: 28px;
/* border: 1px solid red; */
font-size: 16px;
font-weight: bold;
font-family: "行楷";
text-decoration: none;
text-align: center;
line-height: 25px;
margin: 0px auto;
background-color: antiquewhite;
}
#yf ul li a:hover {
background-color: azure;
}
#right{
width: 200px;
height: 250px;
float: right;
/* border: 1px solid red; */
}
#yf{
width: 100px;
height: 260px;
float: left;
margin: 0px auto;
}
#zh{
width: 310px;
height: 260px;
overflow: hidden;
/* border: 1px solid blue; */
margin: 0 auto;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#yf>ul>li").mouseover(function(){
//1.拿到当前鼠标放入列表项的索引
var index=$(this).index()
//2.根据索引找到右侧匹配的项进行显示，其他兄弟元素隐藏
$("#right>img:eq("+index+")").fadeIn().siblings().hide()
})
})
</script>
</head>
<body>
<div id="zh">
<div id="yf">
<ul>
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
</div>
<div id="right">
<img src="img/女靴.jpg" alt="">
<img src="img/雪地靴.jpg" alt="">
<img src="img/冬裙.jpg" alt="">
<img src="img/呢大衣.jpg" alt="">
<img src="img/毛衣.jpg" alt="">
<img src="img/棉服.jpg" alt="">
<img src="img/女裤.jpg" alt="">
<img src="img/羽绒服.jpg" alt="">
<img src="img/牛仔裤.jpg" alt="">
</div>
</div>
</body>
</html>
结果：
折叠菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折叠菜单</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
#main {
width: 350px;
border: 1px darkgrey solid;
margin: 10px auto;
overflow: auto;
}
#head {
width: 350px;
height: 50px;
line-height: 50px;
background-color: darkgray;
}
#head h2 {
float: left;
margin-left: 10px;
}
#head span {
display: block;
width: 25px;
height: 12.5px;
background: url(img/pic.png);
float: right;
margin-top: 18px;
margin-right: 10px;
}
#content {
padding: 10px;
overflow: auto;
/*高度自适应*/
}
#content ul li {
width: 110px;
height: 25px;
line-height: 25px;
float: left;
}
#foot a {
display: block;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
/*background-color: red;*/
float: right;
margin-right: 10px;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#pic").click(function(){
//需要判断一种状态，如果是a那么变成b，否者变成a
var index=$(this).attr("index");
if(index==0){
//完成图片更换和下面部分隐藏
$(this).css("background","url(img/pic.png) 0 12.5px");
$("#content").slideUp(1000);
$("#foot").slideUp(1000);
//改变本身的标记
$(this).attr("index",1);
}else{
//完成图片更换和下面部分显示
$(this).css("background","url(img/pic.png)");
$("#content").slideDown(1000);
$("#foot").slideDown(1000);
//改变本身的标记
$(this).attr("index",0);
}
});
$("#foot a").click(function(){
if(!$("#content>ul>li").is(":hidden")){
//点击的时候 li索引大于4的隐藏
$("#content>ul>li:gt(4)").not(":last").fadeOut()
//内容变为更多
$(this).text("更多👉")
}else{
//点击的时候，所有的li显示
$("#content>ul>li").fadeIn();
//内容变为简化
$(this).text("简化👈")
}
//设置a标签不跳转
return false;
})
});
</script>
</head>
<body>
<div id="main">
<div id="head">
<h2>图书分类</h2>
<span id="pic" index="0">
</span>
</div>
<div id="content">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(2350)</i></li>
<li><a href="#">青春</a><i>(1985)</i></li>
<li><a href="#">少儿</a><i>(1102)</i></li>
<li><a href="#">生活</a><i>(2350)</i></li>
<li><a href="#">社科</a><i>(5684)</i></li>
<li><a href="#">管理</a><i>(1256)</i></li>
<li><a href="#">计算机</a><i>(2135)</i></li>
<li><a href="#">教育</a><i>(3120)</i></li>
<li><a href="#">工具书</a><i>(4213)</i></li>
<li><a href="#">引进版</a><i>(1752)</i></li>
<li><a href="#">其他类</a><i>(9872)</i></li>
</ul>
</div>
<div id="foot">
<a href="">简化☚</a>
</div>
</div>
</body>
</html>
结果
4641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
