0716网站建设,网络优化的工作内容有哪些,朝阳网站开发,网站开发实例教程实训心得文章目录jQuery 介绍初体验核心函数jQuery 对象和 dom 对象区分什么是 jQuery 对象#xff0c;什么是 dom 对象问题#xff1a;jQuery 对象的本质是什么#xff1f;jQuery 对象和 Dom 对象使用区别Dom 对象和 jQuery 对象互转#xff08;重点#xff09;jQuery 选择器什么是 dom 对象问题jQuery 对象的本质是什么jQuery 对象和 Dom 对象使用区别Dom 对象和 jQuery 对象互转重点jQuery 选择器重点基本选择器重点层级选择器重点过滤选择器基本过滤器内容过滤器属性过滤器表单过滤器表单对象属性过滤器jQuery 元素筛选jQuery 的属性操作jQuery 练习DOM 的增删改jQuery 练习2CSS 样式操作jQuery 动画练习CSS_动画 品牌展jQuery 事件操作1、**$( function(){} );和window.onload function(){}的区别**jQuery 中其他的事件处理方法事件的冒泡javaScript 事件对象事件图片跟随jQuery 介绍
jQuery顾名思义也就是 JavaScript 和查询Query它就是辅助 JavaScript 开发的 js 类库。
它的核心思想是 write less,do more(写得更少,做得更多)所以它实现了很多浏览器的兼容问题
初体验
需求使用 jQuery 给一个按钮绑定单击事件?
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
script typetext/javascript src../script/jquery-1.7.2.js/script
script typetext/javascript
// window.onload function () {
// var btnObj document.getElementById(btnId);
// // alert(btnObj);//[object HTMLButtonElement] dom 对象
// btnObj.onclick function () {
// alert(js 原生的单击事件);
// }
// }
$(function () { // 表示页面加载完成 之后相当 window.onload function () {}
var $btnObj $(#btnId); // 表示按 id 查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert(jQuery 的单击事件);
});
});
/script
/head
body
button idbtnIdSayHello/button
/body常见问题 1、使用 jQuery 一定要引入 jQuery 库吗 答案 是必须 2、jQuery 中的$到底是什么 答案 它是一个函数 3、怎么为按钮添加点击响应函数的 答案
使用 jQuery 查询到标签对象使用标签对象.click( function(){} );
核心函数
$ 是 jQuery 的核心函数能完成 jQuery 的很多功能。$ ()就是调用$这个函数
1、传入参数为 [ 函数 ] 时 表示页面加载完成之后。相当于 window.onload function(){}
2、传入参数为 [ HTML 字符串 ] 时 会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时 $(“#id 属性值”); id 选择器根据 id 查询标签对象 $(“标签名”); 标签名选择器根据指定的标签名查询标签对象 $(“.class 属性值”); 类型选择器可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时 会把这个 dom 对象转换为 jQuery 对象
jQuery 对象和 dom 对象区分
什么是 jQuery 对象什么是 dom 对象
Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象是 Dom 对象
DOM 对象 Alert 出来的效果是[object HTML 标签名 Element]
script typetext/javascript src../script/jquery-1.7.2.js/script
script typetext/javascript$(function (){var btn01Ele document.getElementById(btn01);alert(btn01Ele);alert($(btn01Ele));})
/scriptjQuery 对象
5.通过 JQuery 提供的 API 创建的对象是 JQuery 对象
6.通过 JQuery 包装的 Dom 对象也是 JQuery 对象
7.通过 JQuery 提供的 API 查询到的对象是 JQuery 对象
jQuery 对象 Alert 出来的效果是[object Object] 问题jQuery 对象的本质是什么
jQuery 对象是 dom 对象的数组 jQuery 提供的一系列功能函数
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
script typetext/javascript src../script/jquery-1.7.2.js/script
script typetext/javascript$(function(){var arr[12,abc,true];var $btns$(button);for(var i0;i$btns.length;i){alert($btns[i]);}});/script
/headjQuery 对象和 Dom 对象使用区别
jQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 jQuery
Dom 对象和 jQuery 对象互转重点
1、dom 对象转化为 jQuery 对象重点
先有 DOM 对象$( DOM 对象 ) 就可以转换成为 jQuery 对象
2、jQuery 对象转为 dom 对象重点
先有 jQuery 对象jQuery 对象[下标]取出相应的 DOM 对 举例 1、dom对象
$(function(){alert(document.getElementById(dom2dom));});2、dom转jQuery
alert($(document.getElementById(dom2dom)));3、jQuery转dom
alert($(document.getElementById(dom2dom))[0]);jQuery 选择器重点
基本选择器重点 #ID 选择器根据 id 查找标签对象.class 选择器根据 class 查找标签对象element 选择器根据标签名查找标签对象*选择器表示任意的所有的元素selector1selector2 组合选择器合并选择器 1选择器 2 jQuery中的p.myClass——要求表示标签名必须是 p 标签而且 class 类型还要是 myClass 结果中的顺序和jQuery中的顺序不一致是因为结果中的顺序是按照html页面中标签的顺序出现的其实就是html代码中的顺序 举例
script typetext/javascript src../script/jquery-1.7.2.js/scriptscript typetext/javascript$(function (){//1.选择 id 为 one 的元素 background-color,#bbffaa$(#btn1).click(function (){$(#one).css(background-color,#bbffaa);});//2.选择 class 为 mini 的所有元素$(#btn2).click(function (){$(.mini).css(background-color,#bbffaa);});//3.选择 元素名是 div 的所有元素$(#btn3).click(function (){$(div).css(background-color,#bbffaa);});//4.选择所有的元素$(#btn4).click(function (){$(*).css(background-color,#bbffaa);});//5.选择所有的 span 元素和id为two的元素$(#btn5).click(function (){$(span,#two).css(background-color,#bbffaa);});});/script层级选择器重点 ancestor descendant 后代选择器 在给定的祖先元素下匹配所有的后代元素parent child 子元素选择器在给定的父元素下匹配所有的子元素prev next 相邻元素选择器匹配所有紧接在 prev 元素后的 next 元素prev ~ sibings 之后的兄弟元素选择器匹配 prev 元素之后的所有 siblings 元素
htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8titleUntitled Document/titlestyle typetext/cssdiv, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} /stylescript typetext/javascript src../script/jquery-1.7.2.js/scriptscript typetext/javascript$(document).ready(function(){//1.选择 body 内的所有 div 元素 $(#btn1).click(function(){$(body div).css(background, #bbffaa);});//2.在 body 内, 选择div子元素 $(#btn2).click(function(){$(bodydiv).css(background, #bbffaa);});//3.选择 id 为 one 的下一个 div 元素 $(#btn3).click(function(){$(#onediv).css(background, #bbffaa);});//4.选择 id 为 two 的元素后面的所有 div 兄弟元素$(#btn4).click(function(){$(#two~div).css(background, #bbffaa);});});/script/headbody !-- divh1层级选择器:根据元素的层级关系选择元素/h1ancestor descendant parent child prev next prev ~ siblings /div --input typebutton value选择 body 内的所有 div 元素 idbtn1 /input typebutton value在 body 内, 选择div子元素 idbtn2 /input typebutton value选择 id 为 one 的下一个 div 元素 idbtn3 /input typebutton value选择 id 为 two 的元素后面的所有 div 兄弟元素 idbtn4 /brbrdiv classone idoneid 为 one,class 为 one 的divdiv classminiclass为mini/div/divdiv classone idtwo titletestid为two,class为one,title为test的divdiv classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletesstclass为mini,title为tesst/div/divdiv styledisplay:none; classnonestyle的display为none的div/divdiv classhideclass为hide的div/divdiv包含input的type为hidden的divinput typehidden size8/divspan idspan^^span元素^^/span/body
/html样式 parent child 子元素选择器在给定的父元素下匹配所有的子元素选择的是只有下面一级 $ (document).ready(function(){ }其实就是$ ( function(){ })的相同写法后面是前面的简写 过滤选择器
基本过滤器 :first 获取第一个元素 :last 获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素从 0 开始计数 :odd 匹配所有索引值为奇数的元素从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1, h2, h3 之类的标题元素 :animated 匹配所有正在执行动画效果的元素
!DOCTYPE htmlPUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta contenttext/html charsetUTF-8 http-equivContent-Typetitle$的本质/titlescript typetext/javascript src../script/jQuery.js/scriptstyle typetext/cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size:12px;}div.hide{display: none;}/stylescript typetext/javascript$(function () {function anmateIt(){$(#mover).slideToggle(slow,anmateIt);}anmateIt();});$(function () {//1、选择第一个div元素$(#btn1).click(function () {$(div:first).css(background-color,#bbffaa);});//2、选择最后一个div元素$(#btn2).click(function () {$(div:last).css(background-color,#bbffaa);});//3、选择class不为one的所有div元素$(#btn3).click(function () {$(div:not(.one)).css(background-color,#bbffaa);});//4、选择索引值为偶数的div元素$(#btn4).click(function () {$(div:even).css(background-color,#bbffaa);});//5、选择索引值为奇数的div元素$(#btn5).click(function () {$(div:odd).css(background-color,#bbffaa);});//6、选择索引值大于3的div元素$(#btn6).click(function () {$(div:gt(3)).css(background-color,#bbffaa);});//7、选择索引值等于3的div元素$(#btn7).click(function () {$(div:eq(3)).css(background-color,#bbffaa);});//8、选择索引值小于3的div元素$(#btn8).click(function () {$(div:lt(3)).css(background-color,#bbffaa);});//9、选择所有的标题元素$(#btn9).click(function () {$(:header).css(background-color,#bbffaa);});//10、选择当前正在执行动画的所有元素$(#btn10).click(function () {$(:animated).css(background-color,#bbffaa);});//11、没有执行动画的最后一个div$(#btn11).click(function () {$(div:not(:animated):last).css(background-color,#bbffaa);});});/script
/head
body
button idbtn1选择第一个div元素/button
button idbtn2选择最后一个div元素/button
button idbtn3选择class不为one的所有元素/button
button idbtn4选择索引值为偶数的div元素/button
button idbtn5选择索引值为奇数的div元素/button
button idbtn6选择索引值大于3的div元素/button
button idbtn7选择索引值等于3的div元素/button
button idbtn8选择索引值小于3的div元素/button
button idbtn9选择所有的标题元素/button
button idbtn10选择当前正在执行动画的所有元素/button
button idbtn11没有执行动画的最后一个div/button
br/
h3基本选择器/h3
br/
div classone idone选择id为one的元素div classminiclass为mini/div
/div
div classone idtwo titletestid为two,class为one,title为test的divdiv classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletestclass为mini,title为test/div
/div
div styledisplay: none classnonestyle的display为none的div/div
div classhideclass为“hidden的div”/div
div包含input的type为hidden的divinput typehidden size8
/div
div classone idmover正在展示动画的div元素/div
/body
/html注意header和animated两个前面不能写body加了之后会出错 内容过滤器 :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配含有子元素或者文本的元素 :has(selector) 匹配含有选择器所匹配的元素的元素
!DOCTYPE htmlPUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta contenttext/html charsetUTF-8 http-equivContent-Typetitle内容过滤选择器/titlescript typetext/javascript src../script/jQuery.js/scriptstyle typetext/cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size:12px;}div.hide{display: none;}/stylescript typetext/javascript$(function () {function anmateIt(){$(#mover).slideToggle(slow,anmateIt);}anmateIt();});$(function () {//1、选择含有文本id的div元素$(#btn1).click(function () {$(div:contains(id)).css(background-color,#bbffaa);});//2、选择不含子元素或者文本元素的div元素$(#btn2).click(function () {$(div:empty).css(background-color,#bbffaa);});//3、选择含有class为mini元素的div元素$(#btn3).click(function () {$(div:has(.mini)).css(background-color,#bbffaa);});//4、选择含有子元素或者文本元素的div元素$(#btn4).click(function () {$(div:parent).css(background-color,#bbffaa);});});/script
/head
body
button idbtn1选择含有文本id的div元素/button
button idbtn2选择不含子元素或者文本元素的div元素/button
button idbtn3选择含有class为mini元素的div元素/button
button idbtn4选择含有子元素或者文本元素的div元素/buttonbr/
h3基本选择器/h3
br/
div classone idone选择id为one的元素div classminiclass为mini/div
/div
div classone idtwo titletestid为two,class为one,title为test的divdiv classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletestclass为mini,title为test/div
/divdiv styledisplay: none classnonestyle的display为none的div/div
div classhideclass为“hidden的div”/divdiv包含input的type为hidden的divinput typehidden size8
/divdiv classone idmover正在展示动画的div元素/div
/body
/html注意contain的括号里不加双引号否则报错 但是$()里面是要加双引号的 属性过滤器 [attribute] 匹配包含给定属性的元素。 [attributevalue] 匹配给定的属性是某个特定值的元素 [attribute!value] 匹配所有不含有指定的属性或者属性不等于特定值的元素。 [attribute^value] 匹配给定的属性是以某些值开始的元素 [attribute$value] 匹配给定的属性是以某些值结尾的元素 [attribute*value] 匹配给定的属性是以包含某些值的元素 [ attrSel1][ attrSel2][ attrSelN] 复合属性选择器需要同时满足多个条件时使用。
!DOCTYPE htmlPUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta contenttext/html charsetUTF-8 http-equivContent-Typetitle属性选择器/titlescript typetext/javascript src../script/jQuery.js/scriptstyle typetext/cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size:12px;}div.hide{display: none;}/stylescript typetext/javascript$(function () {function anmateIt(){$(#mover).slideToggle(slow,anmateIt);}anmateIt();});$(function () {//1、选择含有属性title的div元素$(#btn1).click(function () {$(div[title]).css(background-color,#bbffaa);});//2、选择属性title值等于test的div元素$(#btn2).click(function () {$(div[titletest]).css(background-color,#bbffaa);});//3、选择属性title值不等于test的div元素没有属性title的也将被选中$(#btn3).click(function () {$(div[title!test]).css(background-color,#bbffaa);});//4、选取属性title值以“te”开始的div元素$(#btn4).click(function () {$(div[title^te]).css(background-color,#bbffaa);});//5、选取属性title值以‘est‘结束的div元素$(#btn5).click(function () {$(div[title$est]).css(background-color,#bbffaa);});//6、选取属性title值含有’es‘的div元素$(#btn6).click(function () {$(div[title*es]).css(background-color,#bbffaa);});//7、组合器首先选取有属性id的div元素然后在结果中选取属性title值含有es 的div元素$(#btn7).click(function () {$(div[id][title*es]).css(background-color,#bbffaa);});//8、选取含有title属性值且title属性值不等于test的div元素$(#btn8).click(function () {$(div[title][title!test]).css(background-color,#bbffaa);});});/script
/head
body
button idbtn1选择含有属性title的div元素/button
button idbtn2选择属性title值等于test的div元素/button
button idbtn3选择属性title值不等于test的div元素没有属性title的也将被选中/button
button idbtn4选取属性title值以“te”开始的div元素/button
button idbtn5选取属性title值以‘est‘结束的div元素/button
button idbtn6选取属性title值含有’es‘的div元素/button
button idbtn7组合器首先选取有属性id的div元素然后在结果中选取属性title值含有es 的div元素/button
button idbtn8选取含有title属性值且title属性值不等于test的div元素/buttondiv classone idone选择id为one的元素div classminiclass为mini/div
/div
div classone idtwo titletestid为two,class为one,title为test的divdiv classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div
/div
div classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletestclass为mini,title为test/div
/divdiv styledisplay: none classnonestyle的display为none的div/div
div classhideclass为“hidden的div”/divdiv包含input的type为hidden的divinput typehidden size8
/divdiv classone idmover正在展示动画的div元素/div
/body
/html表单过滤器 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有 文本输入框 :password 匹配所有的密码输入框 :radio 匹配所有的单选框 :checkbox 匹配所有的复选框 :submit 匹配所有提交按钮 :image 匹配所有 img 标签 :reset 匹配所有重置按钮 :button 匹配所有 input typebutton 按钮 :file 匹配所有 input typefile 文件上传 :hidden 匹配所有不可见元素 display:none 或 input typehidden
表单对象属性过滤器 :enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有选中的单选复选和下拉列表中选中的 option 标签对象 :selected 匹配所有选中的 option
!DOCTYPE htmlPUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta contenttext/html charsetUTF-8 http-equivContent-Typetitle表单对象属性过滤选择器/titlescript typetext/javascript src../script/jQuery.js/scriptstyle typetext/cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size:12px;}div.hide{display: none;}/stylescript typetext/javascript$(function () {function anmateIt(){$(#mover).slideToggle(slow,anmateIt);}anmateIt();});$(function () {//1、对表单内可用input赋值操作$(#btn1).click(function () {//val()可以操作表单项的value属性值//它可以设置和获取$(:text:enabled).val(万能的张三);});//2、对表单内不可用input赋值操作$(#btn2).click(function () {$(:text:disabled).val(非常万能的张三);});//3、获取多选框选中的个数使用size()方法获取选取到的元素集合的元素个数$(#btn3).click(function () {$((:checkbox:checked).length);});//4、获取多选框每个选中的value值$(#btn4).click(function () {var $checkboxes $(:checkbox:checked);//以前的遍历方式
/* for (var i 0; i $checkboxes.length; i) {alert(($checkboxes[i]).value);}*///each方法是jQuery对象提供的用来遍历元素的方法//在遍历的function函数中有一个this对象就是当前遍历到的dom对象$checkboxes.each(function () {alert(this.value);})});//5、获取下拉框选中的内容$(#btn5).click(function () {//获取选中的option对象//遍历获取的option标签中的文本内容var $options $(select option:selected);//遍历$options.each(function () {alert(this.innerHTML);})});});/script
/head
body
h3表单对象属性过滤选择器/h3
button idbtn1对表单内可用input赋值操作/button
button idbtn2对表单内不可用input赋值操作/button
button idbtn3获取多选框选中的个数使用size()方法获取选取到的元素集合的元素个数/button
button idbtn4获取多选框每个选中的value值/button
button idbtn5获取下拉框选中的内容/buttonform idform1 action#可用元素input name add value可用文本框1br不可用元素input name email disableddisabled value不可用文本框1br/可用元素input name che value可用文本框2br/不可用元素input namename value不可用文本框2 disableddisabled/br/br/多选框brinput typecheckbox namenewsletter checkedchecked valuetest1/test1input typecheckbox namenewsletter valuetest2/test2input typecheckbox namenewsletter valuetest3/test3input typecheckbox namenewsletter checkedchecked valuetest4/test4input typecheckbox namenewsletter valuetest5/test5br/br/下拉列表1br/select nametest multiplemultiple style idsele1option浙江/optionoption selectedselected辽宁/optionoption北京/optionoption selectedselected天津/optionoption广州/optionoption湖北/option/selectbr/下拉列表2br/select nametest2option浙江/optionoption上海/optionoption杭州/optionoption selectedselected北京/optionoption深圳/option/select
/form
/body
/html第一项操作中使用的是val来进行赋值操作val是jQuery对象可用的而dom对象可以使用的是value两者不能相互使用 each方法是jQuery对象提供的用来遍历元素的方法 jQuery 元素筛选 eq() 获取给定索引的元素 功能跟 :eq() 一样 first() 获取第一个元素 功能跟 :first 一样 last() 获取最后一个元素 功能跟 :last 一样 filter(exp) 留下匹配的元素 is(exp) 判断是否匹配给定的选择器只要有一个匹配就返回true has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样 not(exp) 删除匹配选择器的元素 功能跟 :not 一样 children(exp) 返回匹配给定选择器的子元素 功能跟 parentchild 一样 find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样 next() 返回当前元素的下一个兄弟元素 功能跟 prev next 功能一样 nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样 nextUntil() 返回当前元素到指定匹配的元素为止的后面元素 parent() 返回父元素 prev(exp) 返回当前元素的上一个兄弟元素 prevAll() 返回当前元素前面所有的兄弟元素 prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素 siblings(exp) 返回所有兄弟元素 add() 把 add 匹配的选择器的元素添加到当前 jquery 对象
!DOCTYPE htmlPUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
headmeta contenttext/html charsetUTF-8 http-equivContent-Typetitle$的本质/titlescript typetext/javascript src../script/jQuery.js/scriptstyle typetext/cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini{width: 55px;height: 55px;background-color: #aaa;font-size:12px;}div.hide{display: none;}/stylescript typetext/javascript$(function () {function anmateIt(){$(#mover).slideToggle(slow,anmateIt);}anmateIt();});$(function () {//1、eq()选择索引值为等于3的div元素$(#btn1).click(function () {$(div).eq(3).css(background-color,#bfa);});//2、first()选择第一个div元素$(#btn2).click(function () {$(div).first().css(background-color,#bfa);});//3、last()选择最后一个div元素$(#btn3).click(function () {$(div).last().css(background-color,#bfa);});//4、filter()在div中选择索引为偶数的$(#btn4).click(function () {$(div).filter(:even).css(background-color,#bfa);});//5、is()判断#one是否为:empty或:parent$(#btn5).click(function () {alert($(#one).is(:empty));alert($(#one).is(:parent));});//6、has()选择div中包含.mini的$(#btn6).click(function () {$(div).has(.mini).css(background-color,#bfa);});//7、not()选择div中class不为one的$(#btn7).click(function () {$(div).not(.one).css(background-color,#bfa);});//8、children()在body中选择所有class为one的div子元素$(#btn8).click(function () {$(body).children(div.one).css(background-color,#bfa);});//9、find()在body中选择所有class为mini 的div后代元素$(#btn9).click(function () {$(body).find(div.mini).css(background-color,#bfa);});//10、next()#one的下一个div$(#btn10).click(function () {$(#one).next(div).css(background-color,#bfa);});//11、nextAll()#one后面左右的span元素$(#btn11).click(function () {$(#one).nextAll(span).css(background-color,#bfa);});//12、nextUntil()#one和span之间的元素$(#btn12).click(function () {$(#one).nextUntil(span).css(background-color,#bfa);});//13、parent().mini的父元素$(#btn13).click(function () {$(.mini).parent().css(background-color,#bfa);});//14、prev()#two的上一个div$(#btn14).click(function () {$(#two).prev(div).css(background-color,#bfa);});//15、prevAll()span前面所有的div$(#btn15).click(function () {$(span).prevAll(div).css(background-color,#bfa);});//16、prevUntil()span向前直到#one的元素$(#btn16).click(function () {$(span).prevUntil(#one).css(background-color,#bfa);});//17、sibling()#two的所有兄弟元素$(#btn17).click(function () {$(#two).siblings().css(background-color,#bfa);});//18、add()选择所有的span元素和id为two的元素$(#btn18).click(function () {$(span).add(#two).css(background-color,#bfa);});});/script
/head
body
button idbtn1eq()选择索引值为等于3的div元素/buttonbr
button idbtn2first()选择第一个div元素/buttonbr
button idbtn3last()选择最后一个div元素/buttonbr
button idbtn4filter()在div中选择索引为偶数的/buttonbr
button idbtn5is()判断#one是否为:empty或:parent/buttonbr
button idbtn6has()选择div中包含.mini的/buttonbr
button idbtn7not()选择div中class不为one的/buttonbr
button idbtn8children()在body中选择所有class为one的div子元素/buttonbr
button idbtn9find()在body中选择所有class为mini 的div后代元素/buttonbr
button idbtn10next()#one的下一个div/buttonbr
button idbtn11nextAll()#one后面左右的span元素/buttonbr
button idbtn12nextUntil()#one和span之间的元素/buttonbr
button idbtn13parent().mini的父元素/buttonbr
button idbtn14prev()#two的上一个div/buttonbr
button idbtn15prevAll()span前面所有的div/buttonbr
button idbtn16prevUntil()span向前直到#one的元素/buttonbr
button idbtn17sibling()#two的所有兄弟元素/buttonbr
button idbtn18add()选择所有的span元素和id为two的元素/buttonbr
br/h3基本选择器/h3
br/文本框input typetextbr/br/div classone idone选择id为one的元素div classminiclass为mini/div
/divdiv classone idtwo titletestid为two,class为one,title为test的divdiv classmini titleotherclass为mini,title为other/divdiv classmini titletestclass为mini,title为test/div
/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini/div
/divdiv classonediv classminiclass为mini/divdiv classminiclass为mini/divdiv classminiclass为mini/divdiv classmini titletestclass为mini,title为test/div
/divspan^^span元素111^^/spandiv styledisplay: none classnonestyle的display为none的div/divdiv classhideclass为“hidden的div”/divdiv classone 包含input的type为hidden的divinput typehidden size8
/divspan^^span元素222^^/spandiv classone idmover正在展示动画的div元素/div/body
/htmljQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。会把内容中的标签解析为html标签并按照对应效果输出
text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。不会解析文本中的内容直接接收或输出成本
val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlescript typetext/javascript srcscript/jQuery.js/scriptscript typetext/javascript$(function () {//html相当于innerHTML//不传值是获取传值是设置alert($(div).html());$(div).html(h3你不是一个div/h3);//text//不传值是获取传值是设置alert($(div).text());$(div).text(span你不是一个div/span);//val传值就是设置不传值就是获取$(button).click(function () {alert($(#username).val());});});/script
/head
body
divdiv标签spanspan标签/span/div
input typetext nameusername idusername
button点击提交/button
/body
/htmlval属性的特殊用法
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlescript typetext/javascript srcscript/jQuery.js/scriptscript typetext/javascript$(function () {//批量操作单选$(:radio).val([radio2]);//批量操作多框的选中状态$(:checkbox).val([checkboxes1,checkboxes2]);//批量操作多选下拉框的选中装态$(#multiple).val([mul1,mul2]);//操作单选下拉框选中状态$(#danxuan).val([dan1]);//同时批量操作不同属性的val值$(:radio,:checkbox,#multiple,#danxuan).val([radio2,checkboxes1,dan1,checkboxes2,mul1,mul2,])});/script
/head
body单选input typeradio namedanxuan valueradio1radio1input typeradio namedanxuan valueradio2radio2br/多选input typecheckbox namecheckboxes valuecheckboxes1checkbox1input typecheckbox namecheckboxes valuecheckboxes2checkbox1input typecheckbox namecheckboxes valuecheckboxes3checkbox1br/下拉多选select idmultiple multiplemultipleoption valuemul11/optionoption valuemul22/optionoption valuemul33/optionoption valuemul44/option/selectbr/下拉单选select iddanxuanoption valuedan11/optionoption2/optionoption3/optionoption4/option/select
/body
/htmlattr() 可以设置和获取属性的值不推荐操作checked、readOnly、selected、diable等等。
attr() 还可以操作非标准的属性。比如abc,bbj自定义的属性等
prop() 可以设置和获取属性的值只推荐操作checked、readOnly、selected、diable等等
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlescript typetext/javascript srcscript/jQuery.js/scriptscript typetext/javascript$(function () {//attralert($(:checkbox:first).attr(name));//获取$(:checked:first).attr(name,check);//设置 设置的属性 属性值alert($(:checkbox:last).attr(checked));//官方觉得attr(checked)在未设置的情况下返回undefined是一种错误所以引出prop方法//因为此时并没有设置checked这个属性所以会返回undefined//attr返回的是checked和undefinedalert($(:checkbox:last).prop(checked));//返回true或false$(:checkbox:last).prop(checked,true);//设置//设置和获取非标准的属性值$(:checkbox).attr(abc,abcValue);alert($(:checkbox).attr(abc));});/script
/head
body多选input typecheckbox namecheckboxes valuecheckboxes1checkbox1input typecheckbox namecheckboxes valuecheckboxes2checkbox1input typecheckbox namecheckboxes valuecheckboxes3checkbox1br/
/body
/htmljQuery 练习
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlescript typetext/javascript src../../script/jQuery.js/scriptscript typetext/javascript$(function () {//给全选绑定单击事件$(#btn1).click(function () {$(:checkbox).prop(checked,true);});//给全不选绑定单击事件$(#btn2).click(function () {$(:checkbox).prop(checked,false);});//给反选绑定单击事件$(#btn3).click(function () {//查询全部的运动的复选框$(:checkbox[nameitems]).each(function (){this.checked !this.checked;});//要检查是否满选如果满选就将上面的复选框也选中var allCount $(:checkbox[nameitems]).length;var checkedCount $(:checkbox[nameitems]:checked).length;if(allCount checkedCount){$(#checkedAllBox).prop(checked,true);}else{$(#checkedAllBox).prop(checked,false);}});//给提交按钮绑定事件$(#sub).click(function () {$(:checkbox[nameitems]:checked).each(function () {alert(this.value);});});//给全选/全不选绑定事件$(#checkedAllBox).click(function () {//alert(this.checked);if (this.checked) {$(:checkbox[nameitems]).prop(checked, true);} else {$(:checkbox[nameitems]).prop(checked, false);}});//给球类复选框绑定事件$(:checkbox[nameitems]).click(function () {var allCount $(:checkbox[nameitems]).length;var checkedCount $(:checkbox[nameitems]:checked).length;if (allCount checkedCount) {$(#checkedAllBox).prop(checked, true);} else {$(#checkedAllBox).prop(checked, false);}//$(#checkedAllBox).prop(checked, allCount checkedCount);});});/script
/head
body
form methodpost action你爱好的运动是input typecheckbox idcheckedAllBox/全选/全不选br/input typecheckbox nameitems value足球/足球input typecheckbox nameitems value篮球/篮球input typecheckbox nameitems value游泳/游泳input typecheckbox nameitems value跑步/跑步br/input typebutton idbtn1 value全选/input typebutton idbtn2 value全不选/input typebutton idbtn3 value反选/input typesubmit idsub value提交
/form
/body
/htmlDOM 的增删改 内部插入 appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾成为最后一个子元素 prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面成为第一个子元素
外部插入 insertAfter() a.insertAfter(b) 得到 ba insertBefore() a.insertBefore(b) 得到 ab
替换: replaceWith() a.replaceWith(b) 用 b 替换掉 a replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
删除 remove() a.remove(); 删除 a 标签 empty() a.empty(); 清空 a 标签里的内容
jQuery 练习2
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleUntitled Document/title
link relstylesheet typetext/css hrefstyleB/css.css /
script typetext/javascript src../../script/jquery-1.7.2.js/script
script typetext/javascript$(function(){//删除用户的方法function delA(){//获取要删除员工的名字var name $(this).parents(tr).find(td:eq(0)).text();//弹出一个确认框var flag confirm(确认删除name吗);if(flag){//删除当前a所在的tr$(this).parents(tr).remove();}//取消默认行为return false;}//删除用户//$(a).click(delA);$(a).live(click , delA);//添加员工$(#addEmpButton).click(function(){//获取用户填写的内容var name $(#empName).val();var email $(#email).val();var salary $(#salary).val();//创建tr/*trtdTom/tdtdtomtom.com/tdtd5000/tdtda href#Delete/a/td/tr*/$(tr/tr).append(tdname/td).append(tdemail/td).append(tdsalary/td).append(tda href#Delete/a/td).appendTo(#employeeTable);});});/script
/head
bodytable idemployeeTabletrthName/ththEmail/ththSalary/ththnbsp;/th/trtrtdTom/tdtdtomtom.com/tdtd5000/tdtda href#Delete/a/td/trtrtdJerry/tdtdjerrysohu.com/tdtd8000/tdtda href#Delete/a/td/trtrtdBob/tdtdbobtom.com/tdtd10000/tdtda href#Delete/a/td/tr/tablediv idformDivh4添加新员工/h4tabletrtd classwordname: /tdtd classinpinput typetext nameempName idempName //td/trtrtd classwordemail: /tdtd classinpinput typetext nameemail idemail //td/trtrtd classwordsalary: /tdtd classinpinput typetext namesalary idsalary //td/trtrtd colspan2 aligncenterbutton idaddEmpButton valueabcSubmit/button/td/tr/table/div/body
/html另一种写法
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleUntitled Document/title
link relstylesheet typetext/css hrefstyleB/css.css /
script typetext/javascript src../../script/jquery-1.7.2.js/script
script typetext/javascript
$(function () {
// 创建一个用于复用的删除的 function 函数
var deleteFun function(){
// alert(删除 操作 的 function : this);
// 在事件响应的 function 函数中有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象。
var $trObj $(this).parent().parent();
var name $trObj.find(td:first).text();
/**
* confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么它就提示什么br/
* 当用户点击了确定就返回 true。当用户点击了取消就返回 false
*/
if( confirm(你确定要删除[ name ]吗) ){
$trObj.remove();
}
// return false; 可以阻止 元素的默认行为。
return false;
};
// 给【Submit】按钮绑定单击事件
$(#addEmpButton).click(function () {
// 获取输入框姓名邮箱工资的内容
var name $(#empName).val();
var email $(#email).val();
var salary $(#salary).val();
// 创建一个行标签对象添加到显示数据的表格中
var $trObj $(tr
td name /td
td email /td
td salary /td
tda href\deleteEmp?id002\Delete/a/td
/tr);
// 添加到显示数据的表格中
$trObj.appendTo( $(#employeeTable) );
// 给添加的行的 a 标签绑上事件
$trObj.find(a).click( deleteFun );
});
// 给删除的 a 标签绑定单击事件
$(a).click( deleteFun );
});
/script
/head
body
table idemployeeTable
tr
thName/th
thEmail/th
thSalary/th
thnbsp;/th
/tr
tr
tdTom/td
tdtomtom.com/td
td5000/td
tda hrefdeleteEmp?id001Delete/a/td
/tr
tr
tdJerry/td
tdjerrysohu.com/td
td8000/td
tda hrefdeleteEmp?id002Delete/a/td
/tr
tr
tdBob/td
tdbobtom.com/td
td10000/td
tda hrefdeleteEmp?id003Delete/a/td
/tr
/table
div idformDiv
h4添加新员工/h4
table
tr
td classwordname: /td
td classinp
input typetext nameempName idempName /
/td
/tr
tr
td classwordemail: /td
td classinp
input typetext nameemail idemail /
/td
/tr
tr
td classwordsalary: /td
td classinp
input typetext namesalary idsalary /
/td
/tr
tr
td colspan2 aligncenter
button idaddEmpButton valueabc
Submit
/button
/td
/tr
/table
/div
/body
/html 一、 parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合不包含根元素。 parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 二、 text()只获取标签的文本内容即标签中间的那部分内容如果标签里包含子标签那么也将获取子标签的文本内容当不包括子标签本身。input类标签text()获取为空。与JavaScript的innerText属性功能相同。 html()被选元素的内容包括标签即如果标签里包含子标签那么也将获取子标签本身和子标签中的内容。input类标签html()获取为空。与JavaScript的innerHTML属性功能相同。 val()返回或设置被选元素的值。元素的值是通过 value 属性设置的。因此该方法大多用于 input 元素相当于JS的value属性。 三、 return false要写不然会出错。 主要作用是a标签有超链接点击后会跳转如果不想删除应该阻止其跳转return false就是阻止其跳转的作用 四、 $(“a”).live(“click” , delA);是因为表格后面对应的Delete标签有个标签a 五、 删除时候的this对象是a标签的对象 六、 复用函数del也就是把del函数单独封装起来因为不光是在已有的标签点击delete时需要用到而且在新添加标签后点击delete也需要。如果选择的是click()来绑定a标签的删除事件那么需要绑定两次如第二种方法一次是在删除函数之后一次是在新建的表单后将新加入的数据项的delete绑定del函数。 但是因为方法一中使用了live函数就是live() 方法能对一个还没有添加进DOM的元素有效所以不需要绑定两次。不过在jQuery1.9之后取消了live方法改用on方法。 CSS 样式操作
addClass() 添加样式removeClass() 删除样式toggleClass() 有就删除没有就添加样式。offset() 获取和设置元素的坐标。
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
style typetext/cssdiv{width:100px;height:260px;}div.border{border: 2px white solid;}div.redDiv{background-color: red;}div.blackDiv{border: 5px blue solid;}/stylescript typetext/javascript srcscript/jquery-1.7.2.js/script
script typetext/javascript$(function(){/*
CSS
css(name|pro|[,val|fn]) 读写匹配元素的样式属性。 a.css(color)取出a元素的colora.css(color,red)设置a元素的color为redCSS 类addClass(class|fn) 为元素添加一个class值;div classmini big
removeClass([class|fn]) 删除元素的class值传递一个具体的class值就会删除具体的某个classa.removeClass()移除所有的class值**/var $divEle $(div:first);$(#btn01).click(function(){//addClass() - 向被选元素添加一个或多个类$divEle.addClass(redDiv blackDiv);});$(#btn02).click(function(){//removeClass() - 从被选元素删除一个或多个类 $divEle.removeClass()});$(#btn03).click(function(){//toggleClass() - 对被选元素进行添加/删除类的切换操作 //切换就是如果具有该类那么删除如果没有那么添加上$divEle.toggleClass(redDiv);});$(#btn04).click(function(){//offset() - 返回第一个匹配元素相对于文档的位置。var os $divEle.offset();//注意通过offset获取到的是一个对象这个对象有两个属性top表示顶边距left表示左边距alert(顶边距os.top 左边距os.left);//调用offset设置元素位置时也需要传递一个js对象对象有两个属性top和left//offset({ top: 10, left: 30 });$divEle.offset({top:50,left:60}); });})
/script
/head
bodytable aligncentertrtddiv classborder/div/tdtddiv classbtninput typebutton valueaddClass() idbtn01/input typebutton valueremoveClass() idbtn02/input typebutton valuetoggleClass() idbtn03/input typebutton valueoffset() idbtn04//div/td/tr/tablebr / br /br / br //body
/html注意在offset中赋值时的位置还有语句的符号前面是以逗号结尾最后那个属性没有符号而且花括号号是在外面还要加分号 jQuery 动画
基本动画
show() 将隐藏的元素显示hide() 将可见的元素隐藏。toggle() 可见就隐藏不可见就显示。
以上动画方法都可以添加参数。 1、第一个参数是动画 执行的时长以毫秒为单位 2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入慢慢可见fadeOut() 淡出慢慢消失fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明1 完成可见0.5 半透明fadeToggle() 淡入/淡出 切
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlestyle typetext/cssdiv{background-color: blue;border: 1px solid;width: 400px;height: 200px;}td{border: 1px black solid;}/stylescript typetext/javascript src../script/jQuery.js/scriptscript typetext/javascript$(function () {$(#btn1).click(function () {$(#div1).show();});$(#btn2).click(function () {$(#div1).hide();});$(#btn3).click(function () {$(#div1).toggle();})$(#btn4).click(function () {$(#div1).fadeIn();})$(#btn5).click(function () {$(#div1).fadeOut();})$(#btn6).click(function () {$(#div1).fadeTo(2000,0.5);})$(#btn7).click(function () {$(#div1).fadeToggle();})});/script
/head
bodytable styleborder: 1px black solidtrtd button idbtn1显示show()/button/td/trtrtdbutton idbtn2隐藏hide()/button/td/trtrtdbutton idbtn3显示/隐藏切换toggle()/button/td/trtrtdbutton idbtn4淡入fadeln()/button/td/trtrtdbutton idbtn5淡出fadeOut()/button/td/trtrtdbutton idbtn6淡化到fadeTo()/button/td/trtrtdbutton idbtn7淡化切换fadeToggle()/button/td/tr
/tablediv iddiv1jQuery动画定义了很多种动画效果可以很方便的使用这些动画效果
/div
/body
/html练习CSS_动画 品牌展
需求 1.点击按钮的时候隐藏和显示卡西欧之后的品牌。 2.当显示全部内容的时候按钮文本为“显示精简品牌” 然后小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候要隐藏卡西欧之后的品牌按钮文本为“显示全部品牌” 然后小三形向下。并且把 佳能尼康的品牌颜色改为红色给 li 标签添加 promoted 样式即可
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8title品牌展示/titlestyle typetext/css/*所有样式*/*{margin: 0;padding: 0;}/*主体样式*/boby{font-size: 12px;text-align: center;}/*a标签样式*/a{color: #04D;text-decoration: none;}/*鼠标指针浮动在其上的元素并设计其样式*/a:hover{color: #F50;text-decoration: underline;}/*类型选择器*/.SubCategoryBox{width:600px;margin:0 auto;text-align: center;margin-top: 40px;}.SubCategoryBox ul {list-style: none;}.SubCategoryBox ul li{display: block;float: left;width: 200px;line-height: 20px;}/*类型选择器showmore和showless都有的样式*/.showmore, .showless{clear:both;text-align: center;padding-top:10px;}.showmore a , .showless a{display: block;width:120px;margin: 0 auto;line-height:24px;border: 1px solid #AAA;}.showmore a span{padding-left: 15px;background: url(../img/down.png) no-repeat 0 0 ;}.showless a span{padding-left: 15px;background: url(../img/up.png) no-repeat 0 0 ;}/*a标签高亮*/.promoted a {color:#F50;}/stylescript typetext/javascript src../../script/jQuery.js/scriptscript typetext/javascript$(function () {//基本初始状态$(li:gt(5):not(:last)).hide();//给功能的按钮绑定单击事件找到的是“显示全部品牌”处的//a标签的点击事件而这个a标签所在的位置是大的div下的div下的a$(div div a).click(function () {//点击让某些品牌显示或隐藏$(li:gt(5):not(:last)).toggle();//判断品牌是否隐藏if($(li:gt(5):not(:last)).is(:hidden)){//隐藏的状态下1、显示全部品牌角标向下 showmore$(div div a span).text(显示全部品牌);$(div div).removeClass();$(div div).addClass(showmore);//去掉高亮$(li:contains(索尼)).removeClass(promoted);}else{//不隐藏状态下2、显示精简品牌角标向上 showless$(div div a span).text(显示精简品牌);$(div div).removeClass();$(div div).addClass(showless);//给品牌加高亮$(li:contains(索尼)).addClass(promoted);}return false;});});/script
/head
body
div classSubCategoryBoxullia href#佳能/ai(30440)/i/lilia href#索尼/ai(30440)/i/lilia href#三星/ai(30440)/i/lilia href#尼康/ai(30440)/i/lilia href#松下/ai(30440)/i/lilia href#卡西欧/ai(30440)/i/lilia href#富士/ai(30440)/i/lilia href#柯达/ai(30440)/i/lilia href#宾得/ai(30440)/i/lilia href#理光/ai(30440)/i/lilia href#奥林巴斯/ai(30440)/i/lilia href#明基/ai(30440)/i/lilia href#爱国者/ai(30440)/i/lilia href#其他品牌相机/ai(30440)/i/li/uldiv classshowmorea hrefmore.htmlspan显示全部品牌/span/a/div
/div
/body
/html一回顾 :lt (less than)选择器选取带有小于指定 index 值的元素。 :gt (greater than)选择器选取 index 值高于指定数的元素。 两者的index值都是从0开始 二、 注意调用动画方法同时需要通过对象调用所以前面是$ ( )来定位到某些对象然后通过这些对象调用动画方法。 三、 在点击某个标签后发现页面跳转到404大概率是因为a标签绑定的单击事件函数最后没有写return false jQuery 事件操作
1、$( function(){} );和window.onload function(){}的区别
他们分别是在什么时候触发 1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。 2、原生 js 的页面加载完成之后除了要等浏览器内核解析完标签创建好 DOM 对象还要等标签显示时需要的内容加载完成他们触发的顺序 1、jQuery 页面加载完成之后先执行 2、原生 js 的页面加载完成之后。他们执行的次数 1、原生 js 的页面加载完成之后只会执行最后一次的赋值函数。即window.onload function(){} 2、jQuery 的页面加载完成之后是全部把注册的 function 函数依次顺序全部执行
jQuery 中其他的事件处理方法
click() 它可以绑定单击事件以及触发单击事件 mouseover() 鼠标移入事件 mouseout() 鼠标移出事件 bind() 可以给元素一次性绑定一个或多个事件。 one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。 unbind() 跟 bind 方法相反的操作解除事件的绑定 live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8title事件绑定/titlescript typetext/javascript src../script/jQuery.js/scriptscript typetext/javascript$(function () {//给h5绑定单击事件$(h5).click(function (){alert(点我干嘛);});//给h5绑定鼠标移入事件$(h5).mouseover(function () {console.log(来了老弟);});//给h5绑定鼠标移出事件$(h5).mouseout(function () {console.log(这就要走了);});//给元素绑定一个事件$(button).bind(click,function () {$(h5).click();});//给元素绑定多个事件$(button).bind(click mouseover mouseout,function () {$(h5).click();});//给元素绑定多个事件,但只响应一次$(button).one(click mouseover mouseout,function () {$(h5).click();});//给元素解除事件的绑定$(button).unbind(click);$(h5 classhead什么是java?/h5).appendTo($(#panel));//给后来创建的元素也绑定事件实现实时绑定$(h5).on(click,function () {alert(别碰我);});});/script
/head
body
div idpanelh5 classhead什么是jQuery?/h5button这是一个按钮/button
/div
/body
/html事件的冒泡
什么是事件的冒泡
事件的冒泡是指父子元素同时监听同一个事件。当触发子元素的事件的时候同时也被传递到了父元素的事件里去响应。
如何阻止事件冒泡呢
在事件函数体内return false;可以阻止事件的冒泡传递。
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlescript typetext/javascript src../script/jQuery.js/scriptscript typetext/javascript$(function () {$(span).click(function () {alert(span标签被点击);return false;});$(div).click(function () {alert(div标签被点击);});});/script
/head
body
divspan我是span/span
/div
/body
/htmljavaScript 事件对象
事件对象是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢 在给元素绑定事件的时候在事件的 function( event ) 参数列表中添加一个参数这个参数名我们习惯取名为 event。
这个 event 就是 javascript 传递参事件处理函数的事件对象。
比如
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html langen
headmeta http-equivContent-Type contenttext/html charsetUTF-8titleTitle/titlestyle typetext/css#areaDiv{border:1px solid black;width:300px;height:50px;margin-bottom: 10px;}#showMsg{border:1px solid black;width:300px;heigth:20px;}/stylescript typetext/javascript src../script/jQuery.js/scriptscript typetext/javascript/** 1、原生javascript获取事件对象* 2、jQuery代码获取事件对象* 3、使用bind同时获取对多个事件绑定统一函数怎么获取当前操作是什么事件*/window.onload function () {document.getElementById(areaDiv).onclick function (event) {console.log(event);};};$(function () {$(#areaDiv).click(function (event) {console.log(event);});});$(function () {$(#areaDiv).bind(click mouseover mouseout,function (event) {if(event.type mouseover){console.log(鼠标移入);}else if(event.type mouseout){console.log(鼠标移出);}});});/script
/head
body
div id areaDiv/div
div id showMsg/div
/body
/html获取event时间主要是方便操作 原生 javascript 获取 事件对象
window.onload function () {
document.getElementById(areaDiv).onclick function (event) {
console.log(event);
}
}.jQuery 代码获取 事件对象
$(function () {
$(#areaDiv).click(function (event) {
console.log(event);
});
});使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$(#areaDiv).bind(mouseover mouseout,function (event) {
if (event.type mouseover) {
console.log(鼠标移入);
} else if (event.type mouseout) {
console.log(鼠标移出);
}
});事件图片跟随
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
style typetext/css
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
/style
script typetext/javascript srcscript/jquery-1.7.2.js/script
script typetext/javascript
$(function(){
$(#small).bind(mouseover mouseout mousemove,function (event) {
if (event.type mouseover) {
$(#showBig).show();
} else if (event.type mousemove) {
console.log(event);
$(#showBig).offset({
left: event.pageX 10,
top: event.pageY 10
});
} else if (event.type mouseout) {
$(#showBig).hide();
}
});
});
/script
/head
body
img idsmall srcimg/small.jpg /
div idshowBig
img srcimg/big.jpg
/div
/body
/html
