jQuery简介
? jQuery 是一个快速，小型且功能丰富的JavaScript库，jQuery设计的宗旨时"write less,do more",即倡导写更少的代码，做更多的事情。
基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识JQuery</title>
<script src="../JQuery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
</script>
</head>
<body>
<p>一点，我就消失了</p>
</body>
</html>
$(document)是jquery是HTML的文档对象；
ready()事件在文档对象就绪时触发，这个和onload作用效果是一样的，但是要比onload加载更快；
$(“p”)是一个JQuery选择器,用来选中文档中的p标签，
$(“p”).click为当前选中的对象添加一个click事件，
$(“this”)表示当前的HTML对象，这里指的是p标签，
hide()方法为实现效果，将p标签在单击后内容隐藏。
jQuery选择器
基本选择器
是jQuery中最长用的，最简单的选择器
| 类型 | 语法 | 描述 | 返回值 | 示例 |
|---|
| id选择器 | #id | 根据指定的id匹配元素 | 单个元素 | $(’#content’)选取id为content的元素 | | 类选择器 | .class | 根据指定的class名称匹配元素 | 元素集合 | $(’.content’)选取class为content的元素 | | 标签选择器 | element | 根据指定的标签名匹配元素 | 元素集合 | $(‘p’)选取所有p标签元素 | | 全局选择器 | * | 匹配所有元素 | 元素集合 | $(’*’)选取所有元素 | | 并集选择器 | selector1，
selector2，
… ,
selectorN | 将每个选择器匹配到元素的合并后一起返回 | 元素集合 | $(‘div,p,#content’)选取所有div，配和id为content的元素 |
层次选择器
jQuery层次选择器用于处理元素之间的层次关系，如子元素，后代元素，兄弟元素和相邻元素。
| 类型 | 语法 | 描述 | 返回值 | 示例 |
|---|
| 子选择器 | parent>child | 选取parent元素下所有的child子元素 | 元素集合 | $(‘ul>li’);选取ul元素下所有的li元素 | | 后代选择器 | root siblings | 匹配root元素里所有的siblings后代元素 | 元素集合 | $(‘div p’); 选取div元素中所有的p元素 | | 兄弟选择器 | prev~siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 | $(‘p~span’); 选取所有p元素之后的所有兄弟span元素 | | 相邻选择器 | prev+next | 匹配紧邻prev元素之后的next元素 | 元素集合 | $(‘h1+ul’); 选取紧邻h1元素之后的兄弟元素ul |
过滤选择器
jQuery过滤选择器是根据过滤规则筛选出符合条件的DOM元素。根据不同的过滤规则，可以将jQuery中的过滤选择器分为基本过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，和表单对象属性过滤选择器。
jQuery基础过滤选择器
? 基础过滤选择器是jQuery过滤选择器中使用较为频繁的一个。
| 语法 | 描述 | 返回值 | 示例 |
|---|
| :first | 选取第一个元素 | 单个元素 | $(‘ul:first’)选取所有ul元素中的第一个ul元素 | | :last | 选取最后一个元素 | 单个元素 | $(‘ul:first’)选取所有ul元素中的最后一个ul元素 | | :not(selector) | 选取除给定选择外的所有元素 | 元素集合 | $(‘ul:not(.top)’)选取class不是top的ul元素 | | :even | 选取索引值为偶数的元素，索引从0开始 | 元素集合 | $(‘ul:even’)选取索引是偶数的ul元素 | | :odd | 选取索引值为奇数的元素，索引从0开始 | 元素集合 | $(‘ul:odd’)选取索引是奇数的ul元素 | | :eq(index) | 选取给定索引的元素，索引从0开始 | 单个元素 | $(‘ul:eq(0’)选取索引为0的ul元素 | | :gt(index) | 选取所有大于给定索引的元素，索引从0开始 | 元素集合 | $(‘ul:gt(1)’)选取索引大于1的ul元素 | | :lt(index) | 选取所有小于给定索引的元素，索引从0开始 | 元素集合 | $(‘ul:lt(1)’)选取索引小于1的ul元素 | | :header | 选取所有标题元素，如h1~h6 | 元素集合 | $(’:header’)选取网页中的所有标题元素 | | :focus | 选取当前获取焦点的元素 | 元素集合 | $(’:focus’)选取当前获取焦点的元素 | | :animated | 选取所有动画元素 | 元素集合 | $(’:animated’)选取当前所有动画元素 |
jQuery属性过滤选择器
| 语法 | 描述 | 返回值 | 示例 |
|---|
| [attribute] | 选取包含指定属性的元素 | 元素集合 | $(‘p[id]’)选取含有id属性的元素 | | [attribute=value] | 选取指定属性为value的元素 | 元素集合 | $(‘p[id=content]’)选取id为content的p元素 | | [attribute!=value] | 选取指定属性不为value的元素 | 元素集合 | $(‘p[id!=content]’)选取id不为content的p元素 | | [attribute^=value] | 选取指定属性为指定value开始的元素 | 元素集合 | $(‘p[id^=content]’)选取id为content开始的p元素 | | [attribute$=value] | 选取指定属性为指定value结束的元素 | 元素集合 |
(
′
p
[
i
d
('p[id
(′p[id=content]’)选取id为content结束的p元素 | | [attribute*=value] | 选取指定属性包含value的元素 | 元素集合 | $(‘p[id*=content]’)选取id为包含content的p元素 |
改造手机列表页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" href="./css/index.css">
<script src="../../lib/jquery.js"></script>
<style>
div{
font-size: 10px;
}
</style>
</head>
<body>
<ul class="longmenu clearfix" id="main">
<li onclick="showInfo()"><a href="javascript:;">
<div class="longimg">
<img src="images/pro2.jpg" alt="">
</div>
<div class="detail clearfix">
<p>vivo iQOO Z1 5G 6GB+128GB 星河银 天玑1000Plus旗舰芯片 144Hz竞速屏 44W</p>
<div class="more clearfix">
<div class="price">
<i>￥</i>
<span>2190</span>
</div>
<div class="plus">
<div class="discount">券</div>
</div>
</div>
</div>
</a></li>
<li><a href="javascript:;">
<div class="longimg">
<img src="images/pro1.jpg" alt="">
</div>
<div class="detail clearfix">
<p>vivo iQOO Neo3 5G 8GB+128GB 夜幕黑 高通骁龙865 144Hz竞速屏 立体双扬 44W</p>
<div class="more clearfix">
<div class="price">
<i>￥</i>
<span>2980.00</span>
</div>
<div class="plus">
<div class="discount">券</div>
</div>
</div>
</div>
</a></li>
<li><a href="javascript:;">
<div class="longimg">
<img src="images/pro3.jpg" alt="">
</div>
<div class="detail clearfix">
<p>Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 活动页限量</p>
<div class="more clearfix">
<div class="price">
<i>￥</i>
<span>5999.0</span>
</div>
<div class="plus">
<div class="discount">券</div>
</div>
</div>
</div>
</a></li>
<li><a href="javascript:;">
<div class="longimg">
<img src="images/pro4.jpg" alt="">
</div>
<div class="detail clearfix">
<p>一加 OnePlus 8 Pro 5G旗舰 2K+120Hz 柔性屏 30W无线闪充 高通骁龙865</p>
<div class="more clearfix">
<div class="price">
<i>￥</i>
<span>5398.00</span>
</div>
<div class="plus">
<div class="discount">券</div>
</div>
</div>
</div>
</a></li>
</ul>
<p id="content"></p>
</body>
</html>
<script>
$(function (){
$('img').css('border','black solid 1px');
$('p').prepend($(`<div>【定价:￥7999】</div>`));
$('p>div').css('text-decoration','line-through').css('color','#cccccc');
});
</script>
改造导航下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航下拉菜单</title>
<script src="../lib/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 600px;
margin: 80px auto;
color: #333;
border-radius: 6px;
height: 50px;
border: 1px solid #666;
}
.nav li {
width: 140px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
cursor: pointer;
_display: inline;
position: relative;
}
li ul {
position: absolute;
left: 0;
top: 50px;
display: none;
}
</style>
</head>
<body>
<ul class="nav">
<li id="phone">
<span>最热手机</span>
<ul id="ul01">
<li>小米10 pro</li>
<li>华为 P40 Pro+</li>
<li>三星S21 edge</li>
</ul>
</li>
<li id="home">
<span>家用商品</span>
<ul id="ul02">
<li>智能电饭煲</li>
<li>微波炉</li>
<li>电水壶</li>
</ul>
</li>
<li id="outer">
<span>户外产品</span>
<ul id="ul03">
<li>登山鞋</li>
<li>冲锋衣</li>
<li>智能手表</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
function fn(canshu1, canshu2) {
var li01 = document.getElementById(canshu1);
var ul01 = document.getElementById(canshu2);
li01.onmouseover = function () {
ul01.style.display = "block"
}
li01.onmouseout = function () {
ul01.style.display = "none"
}
}
fn("phone", "ul01");
fn("home", "ul02");
fn("outer", "ul03");
$(function (){
$('ul').css('background-color','#cccccc');
$('.nav>li').css('background-color','#cccc73');
$('.nav ul>li:even').css('background-color','#eec');
$('.nav ul>li:odd').css('background-color','#ffcc00');
});
</script>
|