计算机应用技术第8章-jQuery基础.pptx

第7章jQuery基础回顾了解主流JavaScript框架及其特点本章任务任务1使用jQuery显示“HelloWorld!”什么是框架为什么要使用框架JavaScript框架是一组能轻松生成跨浏览器兼容的JavaScript代码的工具和函数。
应用框架极大地简化了开发进程。
应用框架改进了事件处理的支持。
目前主流的Javascript框架（类库）AngularEmberReactVueNodejQueryjQuery能做什么体验jQuery获取jQueryjQuery库文件任务1：使用jQuery显示“HelloWorld!”第一个jQuery程序jQuery入口函数与JS入口函数的区别编写第一个jQuery程序任务2网站品牌列表的显示与收起任务描述任务分析jQuery选择器jQuery选择器分类基本选择器$(document).ready(function(){
$("dt").click(function(){
$("dd").css("display","block");
});
$("h1").css("color","blue");
})$(".price").css({"background":"#efefef","padding":"5px"});$("#author").css("color","#083499");$(".intro,dt,dd").css("color","#");$("*").css("font-weight","bold");层次选择器$(".textRightp").css("color","#EC0465");$(".textRight>p").css("color",""#EC0465");$("h1+p").css(text-decoration","underline");$("h1~p").css("text-decoration","underline");过滤选择器基本过滤选择器<divclass="contain">
<h2>图书热卖榜</h2>
<ul>
<li>好妈妈胜过好老师：尹建莉著</li>
<li>目送：龙应台</li>
<li>不一样的卡梅拉（第二辑全三册）：（法）约里波瓦著</li>
<li>因为痛，所以叫青春：(韩)金兰都著</li>
<li>史蒂夫·乔布斯传（2014修订版）：乔布斯</li>
<li>学会爱自己（第2辑）（学会大声）：（美）史蒂芬柯洛</li>
</ul>
</div>示例示例练一练可见性过滤选择器任务实现内容过滤选择器完善任务2属性选择器根据属性名获取元素$("#newsa[class='hot']").css("background","#CCFFCC");$(“#newsa[class!='hot']").css("background","#CCFFCC");$("#newsa[href^='www']").css("background","#CCFFCC");$("#newsa[href$='html']").css("background","#CCFFCC");$("#newsa[href*='k2']").css("background","#CCFFCC");子元素过滤选择器:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
:nth-child(2)能选取每个父元素下的索引值等于2的元素。
:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，n从0开始。
:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素，n从0开始。语法语法表单对象属性过滤选择器varcount=$(":input").size();
$("#footer").html("页面一共有"+count+"个input、textarea、select和button元素<br/>");count=$(":checkbox").size();
$("#footer").html($("#footer").html()+"复选框"+count+"个<br/>");$(":button[value='你的爱好']").click(function(){
varhobby=$("input[type='checkbox']:checked").size();
alert("你有"+hobby+"个爱好");
})练一练总结