jquery备课内容_第1页
jquery备课内容_第2页
jquery备课内容_第3页
jquery备课内容_第4页
jquery备课内容_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

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

文档简介

1、第一简介：首先: jquery是一个js框架,它的简洁和快速开发使很多js高手和程序员喜爱.那么jquery能帮助我们做什么?jQuery 库包含以下特性：· HTML 元素选取· HTML 元素操作· CSS 操作· HTML 事件函数· JavaScript 特效和动画· HTML DOM 遍历和修改· AJAX 异步刷新.1、Jquery的结构:最简单的jquery代码让我们了解他的最基本的结构如下:<script type="text/javascript" src="jquery

2、-.min.js"></script> <script type="text/javascript"> $(document).ready( function() alert(“Hello World！"); )</script> 我们只需要通过引入jquery的外部文件即可,你可以通过jquery的官网来下载juery-.js最新js文件.其中$替代的是jquery这个单词,$(document).ready();指的是当我页面加载完毕后执行, 执行的方法都写在ready()中,跟我们以前学的编码格式有些不同，

3、 注意（）。2 、jquery能为我们提供什么？jquery获取Dom对象，Dom你可以简单的理解为是标签。这样理解可能会有写不太准确，但是我们为了便于学习，只能将某些概念进行简单化理解。我们之前获取dom对象都是以Var value=document.getElementById(aaa).value;Var names=document.getElementsByName(name);类似这样的js语句来完成的。此时我们通过jquery怎么来获取呢？我们来看看：$(“#id”) 通过id获取属性值 value： $(“#uid”).val() 此时获取了id=“uid”标签的value值。

4、$(“.class”)获取class属性值。3、jquery对Css的控制：有三种形式：jQuery 拥有三种用于 CSS 操作的重要函数，还有一个.addClass()添加现有css样式。· $(selector).css(name,value) 添加一个css样式。· $(selector).css(properties) 添加多个css样式。· $(selector).css(name) 获取css样式的属性值。· 其中.addClass() 方法可以直接来添加一个已经写好的css样式。第一种：函数 css(name,value) 为所有匹配元素的

5、给定 CSS 属性设置值：$(document).ready(function() $("button").click(function()/选择button 标签 .click 事件时，执行方法 $("p").css("background-color","red"); / p标签 .css 添加css样式，背景色是red颜色 ););实例：<html><head><script type="text/javascript" src="/jquery/j

6、query.js"></script><script type="text/javascript">$(document).ready(function() $("button").click(function() $("p").css("background-color","red"); ););</script></head><body><h2>This is a heading</h2>&l

7、t;p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>第二种添加Css方式：同时添加多个css样式：$(selector).css(properties)$("p").css("background-color":"red","font-size

8、":"200%");实例：<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function() $("button").click(function() $("p").css("background

9、-color":"red","font-size":"200%"); ););</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button><

10、;/body></html>第三种方式：获取css样式属性值。<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function() $("div").click(function() $("#result").html(

11、$(this).css("background-color");/这里你就认为点击谁，this就是哪个对象。 ););</script></head><body><div style="width:100px;height:100px;background:#ff0000"></div><p id="result">Click in the box</p></body></html>4、jquery中的选择器:jQuery 元素

12、选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 <p> 元素。$("ro") 选取所有 class="intro" 的 <p> 元素。$("p#demo") 选取 id="demo" 的第一个 <p> 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("href") 选取所有带有 href 属性的元素。$("href='#'

13、;") 选取所有带有 href 值等于 "#" 的元素。$("href!='#'") 选取所有带有 href 值不等于 "#" 的元素。$("href$='.jpg'") 选取所有 href 值以 ".jpg" 结尾的元素。更多的选择器实例语法描述$(this)当前 HTML 元素$("p")所有 <p> 元素$("ro")所有 class="intro" 的 <p&

14、gt; 元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的第一个元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("href$='.jpg'")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的 <div>

15、 元素中的所有 class="head" 的元素以下是所有选择器的基本格式:选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素element$("p")所有 <p> 元素.class.class$(".intro.demo")所有 class="intro" 且 class=&q

16、uot;demo" 的元素   :first$("p:first")第一个 <p> 元素:last$("p:last")最后一个 <p> 元素:even$("tr:even")所有偶数 <tr> 元素:odd$("tr:odd")所有奇数 <tr> 元素   :eq(index)$("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）:gt(no)$(&qu

17、ot;ul li:gt(3)")列出 index 大于 3 的元素:lt(no)$("ul li:lt(3)")$(ul li:lt(6)li:gt(4)列出 index 小于 3 的元素:not(selector)$("span:not(:empty)")<span><inputtype="text"></input></span>所有不为空的 input 元素   :header$(":header")所有标题元素 <

18、h1> - <h6>:animated 所有动画元素   :contains(text)$(":contains('W3School')")包含指定字符串的所有元素:empty$(":empty")无子（元素）节点的所有元素:hidden$("p:hidden")所有隐藏的 <p> 元素:visible$("table:visible")所有可见的表格   s1,s2,s3$("th,td,

19、.intro")$("div,ul")所有带有匹配选择的元素   attribute$("href")所有带有 href 属性的元素attribute=value$("href='#'")所有 href 属性的值等于 "#" 的元素attribute!=value$("href!='#'")所有 href 属性的值不等于 "#" 的元素attribute$=value$("href$='

20、.jpg'")所有 href 属性的值包含以 ".jpg" 结尾的元素   :input$(":input")所有 <input> 元素:text$(":text")所有 type="text" 的 <input> 元素:password$(":password")所有 type="password" 的 <input> 元素:radio$(":radio")所有 type

21、="radio" 的 <input> 元素:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素:submit$(":submit")所有 type="submit" 的 <input> 元素:reset$(":reset")所有 type="reset" 的 <input> 元素:button$(":button")所有 type=&

22、quot;button" 的 <input> 元素 :image$(":image")所有 type="image" 的 <input> 元素:file$(":file")所有 type="file" 的 <input> 元素   :enabled$(":enabled")所有激活的 input 元素:disabled$(":disabled")所有禁用的 input 元素:selected$(&qu

23、ot;:selected")所有被选取的 input 元素:checked$(":checked")所有被选中的 input 元素通过以上的选择器的讲解我们学到:(1)、 jquery对css的控制：.css()方法添加样式的两种形式：只添加一个，css（“css属性名”，“属性值”）添加多个 css（ “css属性名”：“属性值”，“css属性名”：“属性值”，“”：“”）；addClass(“.class” ) 添加已有的css样式。注意：他不能覆盖已有的css样式。 (2)jquery选择器：难点：多层选择：例如：$("ul li:eq(3) ul

24、>li:even") 不同层次中间用空格隔开， 然后分别选择。以及属性选择器，注意他的格式 $(“href=属性值”)例如：$(document).ready(function() $("#but").click(function() $(".listId").css("background","blue");/将.listId的标签下内容添加background css属性 （只能添加一个css属性）。 $("#uid").css("width":"

25、;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

26、").click(function() $("#sl").css("display","none"); $(this).css("font-size","200px"); /this 获得当前的选择器，（外层的） $("ul li:last").css("font-size","50px"); /其中有first last， ul空格li：last 意思是：ul中的最后一个li元素被选择到了 $("ul li:eve

27、n").css("color","red");/even 控制偶数 在这里指定ul 下面的选择偶数 li $("ul li:odd").css("color","yellow");/选择奇数 $("ul li:eq(3) ul>li:even").css("color","red");/eq 选择第几个元素 $("div :header").css("color","gr

28、een");/：header 选择<h1>到<h6>的标题。 if($("#uid").is(":hidden")alert("商品名称可见");/这里我们学到了：is方法 返回值就是true 和false， /这里的：visible表示状态，：hidden表示隐藏状态。 /$（ 元素：visible）选择可见标签对象。 ); / alert($("span").text(); /.val() 获取value值，.text() 方法获取页面显示的，也就是例如：<span>

29、;这里的值</span> /alert($("id='but'").val(); / 属性选择器： 这里写属性='什么'根据属性值来判断是哪个标签对象。/var item=$("ul>li").text(); />号，父标签下面的所有的子标签。/alert(item); ); ) （3）通过以上的两方面学习我们引出了：val() 获得标签value属性值。text() 获得标签中的值，例如：<span>这里的值</span>attr() 为标签属性添加属性值。例如： $(&#

30、39;#x').attr('disabled', true); $('#x').attr('checked', true); $("#id").attr("src");removeAttr() 移除标签属性的属性值。例：$("#x").removeAttr('disabled');is（）方法：判断信息用的。 例如：判断标签是否是form标签。var isFormParent = $("inputtype='checkbox'"

31、).parent().is("form");is(“:visible”) 判断是否可见。：visible表示一种状态。Is判断。返回值为true或falseis(“:hidden”) 判断是否隐藏的。：visible表示一种状态。Is判断返回值为true或false直接执行方法：<input type=”button”onclick="$('#x').removeAttr('disabled')"/>after(“”) 在某元素或者标签后添加内容。before(“”) 在某元素标签前添加文本内容：例如：$(do

32、cument).ready(function() $(".btn1").click(function() $("p").before("<p>Hello world!</p>"); ););html() 方法返回或设置被选元素的内容 (inner HTML)。注意： 它替换了原有的内容。例如：获取html内容：/获得指定标签的内容的html语句$(document).ready(function() $(".btn1").click(function() alert($("p&qu

33、ot;).html(); ););添加html相当于innerHTML（）方法。$(document).ready(function() $(".btn1").click(function() $("p").html("Hello <b>world!</b>"); ););parent（）方法： 用于找到指定的标签的父标签。例如：var isFormParent $("inputtype='checkbox'").parent().is("form");C

34、hildren（） 方法：用于找到指定的标签的子元素。找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：$("div").children(".selected").css("color", "blue");find（） 方法：搜索所有段落中的后代 span 元素，并将其颜色设置为红色：例如：<body> <p><span>Hello</span>, how are you?</p> <p>Me?

35、 I'm <span>good</span>.</p><script> $("p").find("span").css('color','red');</script></body>选择器：$("ul li:gt(4):not(:last)").hide(); 5/ jquery中的事件:以下是常用的事件,方法描述bind()向匹配元素附加一个或更多事件处理器$(document).ready(function() $(&q

36、uot;button").bind(click:function()$("p").slideToggle();,mouseover:function()$("body").css("background-color","red");, mouseout:function()$("body").css("background-color","#FFFFFF"); ););blur()触发、或将函数绑定到指定元素的 blur 事件$(document

37、).ready(function()$("input").focus(function()$("input").css("background-color","#FFFFCC"); ); $("input").blur(function()$("input").css("background-color","#D6D6FF"); ););change()触发、或将函数绑定到指定元素的 change 事件例如下拉列表，发生变化时，可以获得

38、某些操作值$(".field").change(function() $(this).css("background-color","red"); ););click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的 double click 事件focus()触发、或将函数绑定到指定元素的 focus 事件keydown()触发、或将函数绑定到指定元素的 key down 事件keypress()触发、或将函数绑定到指定元素的 key press 事件keyup()触发、或将函数绑

39、定到指定元素的 key up 事件load()unload()触发、或将函数绑定到指定元素的 load 事件$(document).ready(function() $("div").load("参数"); /这里可以放任意类型文件， load（）方法在jquery所支持的ajax中也应用，见下节课内容。 )error()触发、或将函数绑定到指定元素的 error 事件$(document).ready(function()<html><head><script type="text/javascript"

40、; src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function() $("td").error(function() /先声明这个error事件。这里我们又学到了一个replaceWith（）方法。 $("div").replaceWith("<p><b>没有查询结果！</b></p>"); );

41、if($("td").text()="") $("button").click(function() $("td").error(); );elsealert("a"););</script></head><body><div> <table><tr><td></td></tr></table></div><br><button>查询<

42、/button></body></html>mousedown()触发、或将函数绑定到指定元素的 mouse down 事件mouseout()触发、或将函数绑定到指定元素的 mouse out 事件mouseover()触发、或将函数绑定到指定元素的 mouse over 事件mouseup()触发、或将函数绑定到指定元素的 mouse up 事件ready()文档就绪事件（当 HTML 文档就绪可用时）select()触发、或将函数绑定到指定元素的 select 事件 被鼠标拖拽选中。$(document).ready(function() $("i

43、nput").select(function() $("input").after(" Text marked!"); ););submit()触发、或将函数绑定到指定元素的 submit 事件$(document).ready(function() $("form").submit(function()/这里只能对form表单提交，触发的点击事件可以是任意标签元素。 alert("a"); ););toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。你可以认为他是多个函数

44、进行切换。$(document).ready(function() $("button").toggle(function() $("body").css("background-color","green");, function() $("body").css("background-color","red");, function() $("body").css("background-color","

45、;yellow"); ););通过以上我们学到了如下的方法：slideToggle();/ 方法通过使用滑动效果（高度变化）来切换元素的可见状态。上下滑动replaceWith();/此方法中写指定的HTML语句，意思是替换指定位置内容。其他方法：1、$.each()方法：注意与$().each()方法区别。$.each（obj,fn） obj是数组，fn在obj上一次执行的方法。例如：2、$.extend()方法：$.extend(obj,obj2) obj2 对obj 进行扩展。 如果obj和obj2 对象内部有相同的内容（对象）会被替代掉。例如：3、$.grep（array,fn）通过fn函数来过滤第一个参数（数组）,注意fn必须返回return true或者false进行过滤。利用上面$.each(ob

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

温馨提示

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

最新文档

评论

0/150

提交评论