jquery备课内容

《jquery备课内容》由会员分享，可在线阅读，更多相关《jquery备课内容（17页珍藏版）》请在装配图网上搜索。

1、第一简介：首先: jquery是一个js框架,它的简洁和快速开发使很多js高手和程序员喜爱.那么jquery能帮助我们做什么?jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 异步刷新.1、Jquery的结构:最简单的jquery代码让我们了解他的最基本的结构如下: $(document).ready( function() alert(“Hello World！); ) 我们只需要通过引入jquery的外部文件即可,你可以通过jquery的官网来下载juery-1

2、.6.4.js最新js文件.其中$替代的是jquery这个单词,$(document).ready();指的是当我页面加载完毕后执行, 执行的方法都写在ready()中,跟我们以前学的编码格式有些不同， 注意（）。2 、jquery能为我们提供什么？jquery获取Dom对象，Dom你可以简单的理解为是标签。这样理解可能会有写不太准确，但是我们为了便于学习，只能将某些概念进行简单化理解。我们之前获取dom对象都是以Var value=document.getElementById(aaa).value;Var names=document.getElementsByName(name);类似这

3、样的js语句来完成的。此时我们通过jquery怎么来获取呢？我们来看看：$(“#id”) 通过id获取属性值 value： $(“#uid”).val() 此时获取了id=“uid”标签的value值。$(“.class”)获取class属性值。3、jquery对Css的控制：有三种形式：jQuery 拥有三种用于 CSS 操作的重要函数，还有一个.addClass()添加现有css样式。 $(selector).css(name,value) 添加一个css样式。 $(selector).css(properties) 添加多个css样式。 $(selector).css(name) 获取c

4、ss样式的属性值。 其中.addClass() 方法可以直接来添加一个已经写好的css样式。第一种：函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：$(document).ready(function() $(button).click(function()/选择button 标签 .click 事件时，执行方法 $(p).css(background-color,red); / p标签 .css 添加css样式，背景色是red颜色 ););实例：$(document).ready(function() $(button).click(function() $(

5、p).css(background-color,red); ););This is a headingThis is a paragraph.This is another paragraph.Click me第二种添加Css方式：同时添加多个css样式：$(selector).css(properties)$(p).css(background-color:red,font-size:200%);实例：$(document).ready(function() $(button).click(function() $(p).css(background-color:red,font-size:

6、200%); ););This is a headingThis is a paragraph.This is another paragraph.Click me第三种方式：获取css样式属性值。$(document).ready(function() $(div).click(function() $(#result).html($(this).css(background-color); ););Click in the box4、jquery中的选择器:jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(p) 选取 元素。$(p.intro) 选取所有

7、 class=intro 的 元素。$(p#demo) 选取 id=demo 的第一个 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$(href) 选取所有带有 href 属性的元素。$(href=#) 选取所有带有 href 值等于 # 的元素。$(href!=#) 选取所有带有 href 值不等于 # 的元素。$(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。更多的选择器实例语法描述$(this)当前 HTML 元素$(p)所有 元素$(p.intro)所有 class=intro 的 元素$(.intro)所有

8、class=intro 的元素$(#intro)id=intro 的第一个元素$(ul li:first)每个 的第一个 元素$(href$=.jpg)所有带有以 .jpg 结尾的属性值的 href 属性$(div#intro .head)id=intro 的 元素中的所有 class=head 的元素以下是所有选择器的基本格式:选择器实例选取*$(*)所有元素#id$(#lastname)id=lastname 的元素.class$(.intro)所有 class=intro 的元素element$(p)所有 元素.class.class$(.intro.demo)所有 class=intr

9、o 且 class=demo 的元素:first$(p:first)第一个 元素:last$(p:last)最后一个 元素:even$(tr:even)所有偶数 元素:odd$(tr:odd)所有奇数 元素:eq(index)$(ul li:eq(3)列表中的第四个元素（index 从 0 开始）:gt(no)$(ul li:gt(3)列出 index 大于 3 的元素:lt(no)$(ul li:lt(3)列出 index 小于 3 的元素:not(selector)$(input:not(:empty)所有不为空的 input 元素:header$(:header)所有标题元素 - :an

10、imated所有动画元素:contains(text)$(:contains(W3School)包含指定字符串的所有元素:empty$(:empty)无子（元素）节点的所有元素:hidden$(p:hidden)所有隐藏的 元素:visible$(table:visible)所有可见的表格s1,s2,s3$(th,td,.intro)所有带有匹配选择的元素attribute$(href)所有带有 href 属性的元素attribute=value$(href=#)所有 href 属性的值等于 # 的元素attribute!=value$(href!=#)所有 href 属性的值不等于 # 的元

11、素attribute$=value$(href$=.jpg)所有 href 属性的值包含以 .jpg 结尾的元素:input$(:input)所有 元素:text$(:text)所有 type=text 的 元素:password$(:password)所有 type=password 的 元素:radio$(:radio)所有 type=radio 的 元素:checkbox$(:checkbox)所有 type=checkbox 的 元素:submit$(:submit)所有 type=submit 的 元素:reset$(:reset)所有 type=reset 的 元素:button$

12、(:button)所有 type=button 的 元素:image$(:image)所有 type=image 的 元素:file$(:file)所有 type=file 的 元素:enabled$(:enabled)所有激活的 input 元素:disabled$(:disabled)所有禁用的 input 元素:selected$(:selected)所有被选取的 input 元素:checked$(:checked)所有被选中的 input 元素通过以上的选择器的讲解我们学到:(1)、 jquery对css的控制：.css()方法添加样式的两种形式：只添加一个，css（“css属性名”

13、，“属性值”）添加多个 css（ “css属性名”：“属性值”，“css属性名”：“属性值”，“”：“”）；addClass(“.class” ) 添加已有的css样式。注意：他不能覆盖已有的css样式。 (2)、jquery选择器：难点：多层选择：例如：$(ul li:eq(3) ulli:even) 不同层次中间用空格隔开， 然后分别选择。以及属性选择器，注意他的格式 $(“href=属性值”)例如：$(document).ready(function() $(#but).click(function() $(.listId).css(background,blue);/将.listId的

14、标签下内容添加background css属性 （只能添加一个css属性）。 $(#uid).css(width:150px,height:30px,border:solid 1px red,background-color:#eee);/将id为uid的标签下内容添加多个css属性。 alert($(#uid).css(background-color);/通过点击id为but的按钮来alert弹出 ： id为uid 的标签的 background-color css属性值。 $(span).click(function() $(#sl).css(display,none); $(this)

15、.css(font-size,200px); /this 获得当前的选择器，（外层的） $(ul li:last).css(font-size,50px); /其中有first last， ul空格li：last 意思是：ul中的最后一个li元素被选择到了 $(ul li:even).css(color,red);/even 控制偶数 在这里指定ul 下面的选择偶数 li $(ul li:odd).css(color,yellow);/选择奇数 $(ul li:eq(3) ulli:even).css(color,red);/eq 选择第几个元素 $(div :header).css(colo

16、r,green);/：header 选择到的标题。 if($(#uid).is(:hidden)alert(商品名称可见);/这里我们学到了：is方法 返回值就是true 和false， /这里的：visible表示状态，：hidden表示隐藏状态。 /$（ 元素：visible）选择可见标签对象。 ); / alert($(span).text(); /.val() 获取value值，.text() 方法获取页面显示的，也就是例如：这里的值 /alert($(id=but).val(); / 属性选择器： 这里写属性=什么根据属性值来判断是哪个标签对象。/var item=$(ulli).t

17、ext(); /号，父标签下面的所有的子标签。/alert(item); ); ) （3）通过以上的两方面学习我们引出了：val() 获得标签value属性值。text() 获得标签中的值，例如：这里的值attr() 为标签属性添加属性值。例如： $(#x).attr(disabled, true); $(#x).attr(checked, true);removeAttr() 移除标签属性的属性值。例：$(#x).removeAttr(disabled);is（）方法：判断信息用的。 例如：判断标签是否是form标签。var isFormParent = $(inputtype=checkb

18、ox).parent().is(form);is(“:visible”) 判断是否可见。：visible表示一种状态。Is判断。返回值为true或falseis(“:hidden”) 判断是否隐藏的。：visible表示一种状态。Is判断返回值为true或false直接执行方法：after(“”) 在某元素或者标签后添加内容。before(“”) 在某元素标签前添加文本内容：例如：$(document).ready(function() $(.btn1).click(function() $(p).before(Hello world!); ););html() 方法返回或设置被选元素的内容

19、(inner HTML)。注意： 它替换了原有的内容。例如：获取html内容：/获得指定标签的内容的html语句$(document).ready(function() $(.btn1).click(function() alert($(p).html(); ););添加html相当于innerHTML（）方法。$(document).ready(function() $(.btn1).click(function() $(p).html(Hello world!); ););parent（）方法： 用于找到指定的标签的父标签。例如：var isFormParent $(inputtype=c

20、heckbox).parent().is(form);Children（） 方法：用于找到指定的标签的子元素。找到类名为 selected 的所有 div 的子元素，并将其设置为蓝色：$(div).children(.selected).css(color, blue);find（） 方法：搜索所有段落中的后代 span 元素，并将其颜色设置为红色：例如： Hello, how are you? Me? Im good. $(p).find(span).css(color,red);选择器：$(ul li:gt(4):not(:last).hide(); 5/ jquery中的事件:以下是常用

21、的事件,方法描述bind()向匹配元素附加一个或更多事件处理器$(document).ready(function() $(button).bind(click:function()$(p).slideToggle();,mouseover:function()$(body).css(background-color,red);, mouseout:function()$(body).css(background-color,#FFFFFF); ););blur()触发、或将函数绑定到指定元素的 blur 事件$(document).ready(function()$(input).focus

22、(function()$(input).css(background-color,#FFFFCC); ); $(input).blur(function()$(input).css(background-color,#D6D6FF); ););change()触发、或将函数绑定到指定元素的 change 事件例如下拉列表，发生变化时，可以获得某些操作值$(.field).change(function() $(this).css(background-color,red); ););click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的

23、 double click 事件focus()触发、或将函数绑定到指定元素的 focus 事件keydown()触发、或将函数绑定到指定元素的 key down 事件keypress()触发、或将函数绑定到指定元素的 key press 事件keyup()触发、或将函数绑定到指定元素的 key up 事件load()unload()触发、或将函数绑定到指定元素的 load 事件$(document).ready(function() $(div).load(参数); /这里可以放任意类型文件， load（）方法在jquery所支持的ajax中也应用，见下节课内容。 )error()触发、或将函

24、数绑定到指定元素的 error 事件$(document).ready(function()$(document).ready(function() $(td).error(function() /先声明这个error事件。这里我们又学到了一个replaceWith（）方法。 $(div).replaceWith(没有查询结果！); ); if($(td).text()=) $(button).click(function() $(td).error(); );elsealert(a);); 查询mousedown()触发、或将函数绑定到指定元素的 mouse down 事件mouseout(

25、)触发、或将函数绑定到指定元素的 mouse out 事件mouseover()触发、或将函数绑定到指定元素的 mouse over 事件mouseup()触发、或将函数绑定到指定元素的 mouse up 事件ready()文档就绪事件（当 HTML 文档就绪可用时）select()触发、或将函数绑定到指定元素的 select 事件 被鼠标拖拽选中。$(document).ready(function() $(input).select(function() $(input).after( Text marked!); ););submit()触发、或将函数绑定到指定元素的 submit 事件

26、$(document).ready(function() $(form).submit(function()/这里只能对form表单提交，触发的点击事件可以是任意标签元素。 alert(a); ););toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。你可以认为他是多个函数进行切换。$(document).ready(function() $(button).toggle(function() $(body).css(background-color,green);, function() $(body).css(background-color,red);,

27、 function() $(body).css(background-color,yellow); ););通过以上我们学到了如下的方法：slideToggle();/ 方法通过使用滑动效果（高度变化）来切换元素的可见状态。上下滑动replaceWith();/此方法中写指定的HTML语句，意思是替换指定位置内容。6、Jquery中的回调函数以及几个常用的动画效果方法：jQuery 效果函数方法描述animate()对被选元素应用“自定义”的动画animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创

28、建动画效果。只有数字值可创建动画（比如 margin:30px）。字符串值无法创建动画（比如 background-color:red）。注释：使用 += 或 -= 来创建相对动画（relative animations）。clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()淡入被选元素至完全不透明fadeOut()淡出被选元素至完全不透明fadeTo()把被选元素减弱至给定的不透明度hide()隐藏被选的元素queue()显示被选元素的排队函数show()显示

29、被选的元素slideDown()通过调整高度来滑动显示被选元素slideToggle()对被选元素进行滑动隐藏和滑动显示的切换slideUp()通过调整高度来滑动隐藏被选元素stop()停止在被选元素上运行动画toggle()hover() 事件 鼠标掠过事件.重点：animate() 、hide()、show（）、是很常用的 animate（）主要是通过改变css样式改变属性来控制动画效果的、hide（）、show（）方法， 在以后对ajax的一步刷新的时候很常用，因为我们要隐藏某些标签，当获得到后台的信息数值等 再让它显示出来。由今天讲解的事件我们引出来了一些jquery对文档操作的方法：

30、（其中val（）、text（）、after（）、before（）、html（） 我们已经将结过了。这些都是文档操作的方法）append() 方法在被选元素的结尾（仍然在内部）插入指定内容。例如：$(button).click(function() $(p).append( Hello world!););hide（）方法：让指定内容隐藏。 可以有回调函数。hide（2000，function这里写2秒后，hide方法执行完毕返回的函数，也就是执行的函数）show（）方法：each（）：指定你要循环的标签， 先找到外层标签，div ，遍历里面的多个text类型文本框value值，那么我们这么写： next（）：找到指定的标签下一个相邻的同级标签。如果没有，那么就没有返回值。注意：下面的例子，id为s的input type=“text” 这行标签后必须有与他相同级别的标签，否则，该结果就会alert 出undefind。此时我们可以写一个导航栏:17