js转为jq $(DOM对象)
jq转为js $(jq对象)[0]或者 $(jq对象).get[0]
js获取内容 .innerHTML=""
jq获取内容 .html("")
js页面加载函数onload
jq页面加载函数ready
js获取input里面的value值 对象.value
jq获取input里面的value值 在函数里面写对象.val()
this是DOM对象 想用jQuery的方法 必须先转换为jQuery对象$(this)
js设置样式 对象.className="" .style.backgroundColor=""
jq设置样式 对象.addClass("") 对象.css("background","");
jq设置多个样式 对象.css({
"background": "#6cf",
"font-weight": "bold"
})
jq js
点击事件 click() onclick()
鼠标悬浮mouseover() onmousevoer()
鼠标移除mouseout()
js 显示隐藏display
jq 显示 $("选择器").show() 隐藏 $("选择器").hide()
jq 获取他的子元素 $(this).children("选择器名")
获取他的下一个兄弟元素 $(this).next("兄弟元素的选择器名") 也可以next()获取到是集合
jq jq对象.find("xx")发现子类选择器为xx的
$('tr').children("td:first")：表达式先找到所有tr下的所有td，然后将他们形成一个元素集合，然后在找到第一个td，所以结果只有一个
$('tr').find("td:first")：表达式先遍历了所有的tr，再在每个tr中找到第一个td，所以结果为四个td。
jq 全局选择器$("*") 并集选择器$(".intro,dt,dd")
后代选择器 将类名为textRight下的所有<p>元素 $(".textRight p")
子选择器 将类名为textRight的子元素<p> $(".textRight>p")
相邻兄弟选择器 将<h1>后紧邻的兄弟<p>元素 $("h1+p")
同辈元素选择器(通用兄弟选择器) 将<h1>后的所有兄弟<p>元素 $("h1~p")
将id为news下的所有的带有class属性的<a>标签 $("#news a[class]")
将id为news下的所有的class属性值为hot的<a>标签 $("#news a[class=hot]")
将id为news下的所有的class属性值不等于hot的<a>标签 $("#news a[class!=hot]")
将id为news下的所有的href属性值以www开头的<a>标签 $("#news a[href^=www]")
将id为news下的所有的href属性值以html结尾的<a>标签$("#news a[href$=html]")
将id为news下的所有的href属性值包含k2的<a>标签$("#news a[href*=k2]")
将#sec选择器之外的所有li $("#news ul li:not(#sec)")
1、初识jQ
jQuery：简称javaScript库（框架），使用的时候要进行导入。<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>他把所有的ajax操作封装到一个函数里面$.ajax()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*#app{
color: red;
}*/
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>
<script>
/*
1、通过dom获取id为app的，添加红色字体我是js*/
//第一种
//var appObj=document.getElementById("app");
//appObj.className="app"
//appObj.innerHTML="我是js"
//第二种
//document.getElementById("app").innerHTML="<font color='red'>xxx</font>"
/*
2、dom转为jq 添加红色字体我是js*/
//var appObj=document.getElementById("app");
//$(appObj).html("<font color='red'>我是通过dom转为jQ</font>")
/*
*3、通过jq获取 id为app的，添加红色字体我是js*/
$("#app").html("<font color='red'>我是jQ</font>")
/*
* 4、jq转为dom,添加红色字体我是js */
//jq有隐式迭代 他的选择器获取到的类似于一个集合 所以我们可以像操作集合一样操作他
$("#app")[0].innerHTML="<font color='red'>我是jq转为的dom</font>"
//$("#app").get(0)
</script>
</body>
</html>
表格里面 tr:even获取偶数行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js案例</title>
<style>
table{
border:1px solid black;
border-collapse: collapse;
}
/*奇数行*/
.oddrowcolor {
background-color:lightgoldenrodyellow ;
}
/*偶数行*/
.evenrowcolor {
background-color: ghostwhite;
}
</style>
</head>
<body>
<table border="1" class="altrowstable" id="alternatecolor" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>入职企业</th>
<th>入职时间</th>
<th>试用期</th>
<th>转正</th>
</tr>
<tr>
<td>丁磊</td>
<td>北京网易有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>false</td>
</tr>
<tr>
<td>谢小丫</td>
<td>华为联创软件(北京)有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>false</td>
</tr>
<tr>
<td>王自如</td>
<td>中软创新(北京)科技有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>true</td>
</tr>
</table>
<script type="text/javascript" >
var tableObj=document.getElementById("alternatecolor");
var trObj=tableObj.getElementsByTagName("tr");
window.onload=function(){
for(var i=0;i<trObj.length;i++){
if(i%2==0){
trObj[i].className="evenrowcolor";
}else{
trObj[i].className="oddrowcolor";
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq案例</title>
<style>
table{
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<table border="1" class="altrowstable" id="alternatecolor" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>入职企业</th>
<th>入职时间</th>
<th>试用期</th>
<th>转正</th>
</tr>
<tr>
<td>丁磊</td>
<td>北京网易有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>false</td>
</tr>
<tr>
<td>谢小丫</td>
<td>华为联创软件(北京)有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>false</td>
</tr>
<tr>
<td>王自如</td>
<td>中软创新(北京)科技有限公司</td>
<td>2017.11.10</td>
<td>3个月</td>
<td>true</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$("tr:even").css("background", "#e8f0f2");
});
</script>
</body>
</html>
2、页面加载函数
js的页面加载函数 后面的会覆盖前面的
jq的页面加载函数会依次执行
<body>
<!--引入jQuery-->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*document 是js对象 也就是dom对象
$()是jq的工厂函数
ready()页面加载函数 里面写的是匿名函数*/
$(document).ready(function(){
alert("hello")
});
$(function(){
alert("1")
});
</script>
</body>
3、样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左导航菜单</title>
<style type="text/css">
li {
list-style: none;
line-height: 22px;
cursor: pointer;
}
/*设置鼠标点击之后的背景颜色等样式*/
.current {
background: #6cf;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li id="current">jQuery简介</li>
<li>jQuery语法</li>
<li>jQuery选择器</li>
<li>jQuery事件与动画</li>
<li>jQuery方法</li>
</ul>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* 需求： 1.鼠标点击<li>，将id名为"current"的<li>选中，设置背景颜色等样式
*/
//通过js来做
// var idFirObj=document.getElementById("current");
// idFirObj.οnclick=function(){
// idFirObj.style.backgroundColor="yellow";
// };
//通过jq来做
// $(function(){
// $("li").click(function(){
// //点击任何一个li 都要给第一个li设置背景颜色
// $("#current").addClass("current");
// });
// });
$(function(){
//this是DOM对象 想用jQuery的方法 必须先转换为jQuery对象
$("li").click(function(){
//无论点击哪一个li 都给对应的li设置颜色
// $(this).addClass("current");
//或者
//$(this).css("background","#0000CC");
//设置多个样式
/*
background: #6cf;
font-weight: bold;
color: #fff;
*/
$(this).css({
"background": "#6cf",
"font-weight": "bold",
"color": "#fff"
})
});
})
</script>
</body>
</html>
4、显示影藏
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>仿京东左侧菜单</title>
<link href="示例03：仿京东左侧菜单/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="nav-box">
<div class="nav-top">
<a href="">全部商品分类</a>
</div>
<ul>
<li>
<a href="">家用电器</a>
<div><img src="示例03：仿京东左侧菜单/images/erji.jpg" /></div>
</li>
<li>
<a href="">手机</a>、
<a href="">数码</a>、
<a href="">京东通信</a>
<div><img src="示例03：仿京东左侧菜单/images/erji1.jpg" /></div>
</li>
<li>
<a href="">电脑</a>、
<a href="">办公</a>
<div><img src="示例03：仿京东左侧菜单/images/erji2.jpg" /></div>
</li>
<li>
<a href="">家居</a>、
<a href="">家具</a>、
<a href="">家装</a>、
<a href="">厨具</a>
<div><img src="示例03：仿京东左侧菜单/images/erji3.jpg" /></div>
</li>
<li>
<a href="">男装</a>、
<a href="">女装</a>、
<a href="">珠宝</a>
<div><img src="示例03：仿京东左侧菜单/images/erji4.jpg" /></div>
</li>
</ul>
</div>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*
* 需求： 1.页面加载后实现：当鼠标悬浮在<li>标签上时，当前<li>背景颜色更改为orange
* 2.并将其子元素<div>设置为显示状态
* 3.当鼠标移出<li>标签，则背景颜色回归#c81623，子元素<div>归为隐藏
*/
$(function(){
$("li").mouseover(function(){
$(this).css("background","orange");
$(this).children("div").show();
});
$("li").mouseout(function(){
$(this).children("div").hide();
$(this).css("background","#c81623");
});
});
</script>
</body>
</html>
5、链式操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>问答特效</title>
<style type="text/css">
h2 {
padding: 5px;
}
p,div {
display: none;
}
</style>
</head>
<body>
<h2>什么是受益人?</h2>
<p>
<strong>解答：</strong> 受益人是指人身保险中由被保险人或者投保人指定的 享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<div>
<strong>1解答：</strong> 受益人是指人身保险中由被保险人或者投保人指定的 享有保险金请求权的人，投保人、被保险人可以为受益人。
</div>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* 需求： 1.页面加载，当<h2>被点击的时候，将<h2>的背景颜色设置为#CCFFFF，并同时将其下一个兄弟元素
* CSS样式设置为显示。
*/
$(function(){
$("h2").click(function(){
//$(this).css("background","#CCFFFF").next("p").css("display","block");
$(this).css("background","#CCFFFF").next("p").show();
})
})
</script>
</body>
</html>
6、选择器
6.1 基本选择器
全局选择器$("*")
并集选择器$(".intro,dt,dd")
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折]
<p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 需求： 1.点击dt的时候，利用标签选择器将两个<dd>的内容显示
* 2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色
* 3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
* 4.利用id选择器将id名为author的字体颜色设置为#083499
* 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
* 6.使用全局选择器将所有字体粗细设置为加粗
*/
// 1.点击dt的时候，利用标签选择器将两个<dd>的内容显示
$(function(){
$("dt").click(function(){
$("dd").show();
});
// 2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色
$("h1").css("color","blue");
// 3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
"background":"#efefef",
"padding":"5px"
});
// 4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css("color","#083499");
// 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
$(".intro,dt,dd").css("color","#ff0000");
// 6.使用全局选择器将所有字体粗细设置为加粗
$("*").css("font-weight","bold");
});
</script>
</body>
</html>
6.2 层次选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<p>我是h1的同辈元素p</p>
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折]
<p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 需求： 1.利用后代选择器 将类名为textRight下的所有<p>元素字体颜色设置为红色
* 2.重新利用子选择器 将类名为textRight的子元素<p>字体颜色设置为红色
* 3.利用相邻兄弟选择器 将<h1>后紧邻的兄弟<p>元素内容添加文本装饰下划线
* 4.利用同辈元素选择器(通用兄弟选择器)将<h1>后的所有兄弟<p>元素内容添加文本装饰下划线
*/
$(function(){
// 1.利用后代选择器 将类名为textRight下的所有<p>元素字体颜色设置为红色
// $(".textRight p").css("color","red");
// 2.重新利用子选择器 将类名为textRight的子元素<p>字体颜色设置为红色
// $(".textRight>p").css("color","red");
// 3.利用相邻兄弟选择器 将<h1>后紧邻的兄弟<p>元素内容添加文本装饰下划线
// $("h1+p").css("text-decoration","underline");
// 4.利用同辈元素选择器(通用兄弟选择器)将<h1>后的所有兄弟<p>元素内容添加文本装饰下划线
$("h1~p").css("text-decoration","underline");
});
</script>
</body>
</html>
6.3 属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>京东快报
<a href="#" class="more">更多 > </a>
</header>
<ul>
<li>
<a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a>
</li>
<li id="sec">
<a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a>
</li>
<li>
<a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a>
</li>
<li>
<a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a>
</li>
<li>
<a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a>
</li>
</ul>
</section>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 需求： 1.将id为news下的所有的带有class属性的<a>标签背景颜色设置为#c9cbcb
* 2.将id为news下的所有的class属性值为hot的<a>标签背景颜色设置为#c9cbcb
* 3.将id为news下的所有的class属性值不等于hot的<a>标签背景颜色设置为#c9cbcb
* 4.将id为news下的所有的href属性值以www开头的<a>标签背景颜色设置为#c9cbcb
* 5.将id为news下的所有的href属性值以html结尾的<a>标签背景颜色设置为#c9cbcb
* 6.将id为news下的所有的href属性值包含k2的<a>标签背景颜色设置为#c9cbcb
* 7.将#sec选择器之外的所有li，背景颜色设为yellow
*/
$(function(){
// $("#news a[class]").css("background","#c9cbcb");
// $("#news a[class=hot]").css("background","#c9cbcb");
// $("#news a[class!=hot]").css("background","#c9cbcb");
// $("#news a[href^=www]").css("background","#c9cbcb");
// $("#news a[href$=html]").css("background","#c9cbcb");
// $("#news a[href*=k2]").css("background","#c9cbcb");
$("#news ul li:not(#sec)").css("background","#c9cbcb");
});
</script>
</body>
</html>
6.4 基本过滤选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 需求： 1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff
* 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；
* 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
* 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
* 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
* 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
* 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
* 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
*/
$(function(){
// 1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#fff
// h1-h6
$(":header").css({
"background":"#2a65ba",
"color":"#fff"
});
// 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；
$(".contain ul li:last").css("border","none");
// 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
/*$("li:first").css({
"font-size":"16px",
"color":"#e90202"
});*/
// 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
// $("li:even").css("background","#f0f0f0");
// 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
// $("li:odd").css("background","#f0f0f0");
// 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
// lt eq gt 他们的计算索引从0开始 不包含你写的索引
// $("li:lt(2)").css("color","#708b02");
// 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
// $("li:gt(3)").css("color","#708b02");
// 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
$("li:eq(2)").css("background","#708b02");
});
</script>
</body>
</html>
6.5 可见性过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
#txt_show {
display: none;
color: #00C;
}
#txt_hide {
display: block;
color: #F30;
}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show" />
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
* 需求： 1.点击显示 使用可见性过滤选择器 将所有隐藏的<p>元素显示。
* 2.点击隐藏 使用可见性过滤选择器 将所有显示的<p>元素隐藏
*/
$(function(){
$("#hide").click(hideP);
function hideP(){
$("p:visible").hide();
}
$("#show").click(function(){
$("p:hidden").show();
});
});
</script>
</body>
</html>
1671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
