尚jquery王课堂笔记它可以设置和起始标签结束中的内容_第1页
尚jquery王课堂笔记它可以设置和起始标签结束中的内容_第2页
尚jquery王课堂笔记它可以设置和起始标签结束中的内容_第3页
尚jquery王课堂笔记它可以设置和起始标签结束中的内容_第4页
尚jquery王课堂笔记它可以设置和起始标签结束中的内容_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

jQueryjQueryjQueryCSSjQuery 操今天课程内容1、jQuery的属性操jQuery属性操 跟dom属性innerHTML一样。 它可以设置和获取起始和结束中的文本。 跟dom属性innerText一样。 它可以设置和获取表单项的value属性值。 跟dom属性value一样val方法同时设置多个表单项的选中状<!DOCTYPE<!DOCTYPE<html <metacharset="UTF-<scripttype="text/javascript"src="script/jquery-<script$(function()<inputname="radio"type="radio"value="radio1"<inputname="radio"type="radio"value="radio2"<inputname="checkbox"type="checkbox"value="checkbox1"<inputname="checkbox"type="checkbox"value="checkbox2"<inputname="checkbox"type="checkbox"value="checkbox3"<selectid="multiple"multiple="multiple"<option<option<option<option<select<option<option<option击击击击击击<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../../script/jquery-<script$("#checkedAllBtn").click(function()$("#checkedNoBtn").click(function()$("#checkedRevBtn").click(function()attr 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled2、jQuery2.$(":checkbox[name='items']").each(function()//在eachfunctionthisthisdomthis.checked=varallCount=varcheckedCount=//if(allCount==checkedCount) //}else //$("#checkedAllBox").prop("checked",allCount==击击$("#sendBtn").click(function()$(":checkbox[name='items']:checked").each(function()击/击$("#checkedAllBox").click(function()在应 的function个this个this 的dom在应//击击$(":checkbox[name='items']").click(function()varallCount=varcheckedCount=$("#checkedAllBox").prop("checked",allCount==<formmethod="post"你的运动是？<inputtype="checkbox"id="checkedAllBox"/>全选/<br<inputtype="checkbox"name="items""<inputtype="checkbox"name="items"value="篮球/><inputtype="checkbox"name="items"value="羽毛球/><inputtype="checkbox"name="items"value="乒乓球/><br<inputtype="button"id="checkedAllBtn"value="全选<inputtype="button"id="checkedNoBtn"value="全不选<inputtype="button"id="checkedRevBtn"value="反选<inputtype="button"id="sendBtn"value="提交4、DOM内部插入 ab<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<styletype="text/css">select{width:height:}divwidth:float:text-align:}<scripttype="text/javascript"src="script/jquery-<script$(function()外部插入替换re a.re 用b替换掉re a.re 用a替换掉所有删除 清空 里的内5、jQuery练习$("button:eq(0)").click(function()$("select:eq(0)$("button:eq(1)").click(function()$("select:eq(0)$("button:eq(2)").click(function()$("select:eq(1)$("button:eq(3)").click(function()$("select:eq(1)<div<selectmultiple="multiple"<optionvalue="opt01"><optionvalue="opt02"><optionvalue="opt03"><optionvalue="opt04"><optionvalue="opt05"><optionvalue="opt06"><optionvalue="opt07"><optionvalue="opt08"><button>选中添加到右边<button>全部添加到右边<div<selectmultiple="multiple"<button>选中删除到左边<button>全部删除到左边在应以击，行在应以击，行<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML"<metahttp-equiv="Content-Type"content="text/html;charset=UTF- <linkrel="stylesheet"type="text/css"href="styleB/css.css"<scripttype="text/javascript"src="../../script/jquery-<script$(function()//functionvardeleteFun=alert("function 的function个this个this响的domvar$trObj=varname=confirm是JavaScripttrueifconfirm("你确定要删除name+"]吗？"}//returnfalse;可return//Submit$("#addEmpButton").click(function()//框容varname=$("#empName").val();var=$("#").val();varsalary=//个var$trObj=$("<tr>""<td>"+name+"</td>"+"<td>"++"</td>"+"<td>"+salary+"</td>""<td><ahref=\"deleteEmp?id=002\">Delete</a></td>"$trObj.appendTo($("#employeeTable")上//的 上$trObj.find("a").click(deleteFun击//的 击$("a").click(deleteFun<table <td><a <td><a <td><a<div<h4>添加新员工<tdclass="word">name:<td<inputtype="text"name="empName"id="empName"<td :<td<inputtype="text" " "<tdclass="word">salary:<td<inputtype="text"name="salary"id="salary"<tdcolspan="2"<buttonid="addEmpButton"value="abc">6、CSS样式操作 7、jQuery基本动 1、第一个参数是动画2、第二个参数是动画的回调函数(动画完成后自动调用的函数淡入淡出动 淡入（慢慢可见 淡出（慢慢 在指定时长内慢慢的将修改到指定的值。0透明，1完成可见，0.5半透 淡入/06、CSS_牌展示后，角向。有牌品默颜。然后形向下。并且把佳能，尼康的品牌颜色改为红色（给li添加promoted样式即可<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0"<htmlxmlns="<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"<style*margin:padding:}bodyfont-size:text-align:}acolor:text-decoration:}a:hovercolor:text-decoration:}.SubCategoryBox{width:600px;margin:0auto;text-align:center;margin-top:40px;}.SubCategoryBoxullist-style:}.SubCategoryBoxulli{ y:block;float:left;width:line-height:}.showmore,clear:text-align:center;padding-top:10px;}.showmorea,.showlessa{ y:block;width:margin:0auto;line-height:24px;border:1pxsolid}.showmoreaspanpadding-left:background:url(img/down.gif)no-repeat0}.showlessaspanpadding-left:background:url(img/up.gif)no-repeat0}.promotedacolor:}<scripttype="text/javascript"src="script/jquery-<script$(function()//击//击$("divdiva").click(function()////if($("li:gt(5):not(:last)").is(":hidden")//态：1 ==下$("divdivaspan").text("显示全部品牌$("div$("div掉掉}else ==上$("divdivaspan").text("显示精简品牌$("div$("div加加}}return<div<li><ahref="#">佳能</a><i>(30440)<li><ahref="#">索尼</a><i>(27220)<li><ahref="#">三星</a><i>(20808)<li><ahref="#">尼康</a><i>(17821)<li><ahref="#">松下</a><i>(12289)<li><ahref="#">卡西欧</a><i>(8242<li><ahref="#">富士</a><i>(14894)<li><ahref="#">柯达</a><i>(9520<li><ahref="#">宾得</a><i>(2195<li><ahref="#">理光</a><i>(4114<li><ahref="#">奥林巴斯</a><i>(12205)<li><ahref="#">明基</a><i>(1466<li><ahref="#">爱国者</a><i>(3091<li><ahref="#">其它品牌相机</a><i>(7275<div8、jQuery操$(function(){}和window.onload=的区别1、jQuery的页面加载完成之后是浏览器的内核解析完页面的创建好DOM对象之后就会马上执行2、原生js的页面加载完成之后，除了要等浏览器内核解析完创建好DOM对象，还要等显示时需要的内容加载1、jQuery2、原生js1、原生js2、jQuery的页面加载完成之后是全部把的function函数，依次顺序全部执行jQuery中其他的处理方法 它可以绑定单击，以及触发单击 鼠标移入 鼠标移出 可以给元素绑定一个或多个 使用上跟bind一样。但是one方法绑定的只会响应一次 跟bind方法相反的操作，解除的绑li) 也用绑定。可用来定择匹的有素的哪这元是面动创出的冒什么是的冒泡的冒泡是指，父子元素同时同一个。当触发子元素的的时候，同一个也被传递到了父元素的里去那么如何冒泡呢在子元素函数体内，returnfalse;可以的冒泡传递javaScript对对象，是封装有触发的信息的一个javascript对象我们重点关心的是怎么拿到这个javascript的对象。以及使用如何获取呢javascript对象呢在给元素绑定的时候，在的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event就是javascript传递参处理函数的对象。//1.//1.javascript对window.onload=function() ={}}//2.jQuery代码获取对$$(function()$("#areaDiv").click(function(event)//3.使用bind

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论