Jquery和javascript在使用上的区别_第1页
Jquery和javascript在使用上的区别_第2页
Jquery和javascript在使用上的区别_第3页
Jquery和javascript在使用上的区别_第4页
Jquery和javascript在使用上的区别_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

1、Jquery和javascript在使用上的区别一 选择器在jquery中id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素element$("p")所有 <p> 元素(返回对象数组)在javascript中getElementById("lastname");getElementsByTagName("p");Jquery对于input元素的增强，所有的

2、input元素都可以用下面的方式获取input$(":input")所有 <input> 元素:text$(":text")所有 type="text" 的 <input> 元素即：对于:text形式的用法，都会将含有这个属性的元素取出来二 事件在jquery中blur()触发、或将函数绑定到指定元素的 blur 事件change()触发、或将函数绑定到指定元素的 change 事件click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的 double c

3、lick 事件delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器在javascript中所有的事件都带有on，e.g：onclick()、onblur()事件细节区别：(1)function test()/处理document.getElementById("but1").onclick=test;$(“button”).click(function()/处理);(2)<script language="javascript" type="text/javascript">/事件绑定document

4、.getElementById("but1").attachEvent("onclick",test);</script><script language="javascript" type="text/javascript">/事件解除document.getElementById("but1").detachEvent("onclick",test);</script>/事件绑定<script type="text/ja

5、vascript">$(document).ready(function() $("button").bind("click",function() /处理 ););</script>/事件解除<script type="text/javascript">$(document).ready(function() $("button").unbind("click",function()/处理 );$("button").unbind(&

6、quot;click"););</script>三 文档操作只列举4个常用的例子，至于其他CRUD操作，请参照文档1. 属性操作$("img").attr("width");$("button").click(function() $("img").attr("width","180"););document.getElementById("id").getAttribute("width");document.g

7、etElementById("id"). setAttribute ("width","180");document.getElementsByTagName("img");2. html操作$("p").html(); $(".btn1").click(function() $("p").html("Hello <b>world!</b>"); ); document.getElementById("

8、id").innerHtml;document.getElementById("id").innerHtml=html片段;3. text操作 $("p").text(); $(".btn1").click(function() $("p").text("Hello world!"); );document.getElementById("id").innerText;document.getElementById("id"). innerTex

9、t =文本;4. val操作（好像是input框专用）$(":text").val();$("button").click(function() $(":text").val("Hello Kitty"););document.getElementById("id").value;document.getElementById("id"). value =文本;四 CSS 操作$("p").css("color");$("p&

10、quot;).css("color","red");document.getElementById("id").style.color;document.getElementById("id").style.color=red;五 DOM 元素方法函数描述.get()获得由选择器指定的 DOM 元素。.index()返回指定元素相对于其他指定元素的 index 位置。.size()返回被 jQuery 选择器匹配的元素的数量。.toArray()以数组的形式返回 jQuery 选择器匹配的元素。示例：(1) .ge

11、t() $("button").click(function() x=$("p").get(0); $("div").text(x.nodeName + ": " + x.innerHTML); );(2) .index() $("li").click(function() alert($(this).index(); );(3) .size() $("img").size();(4) .toArray() $("button").click(functi

12、on() x=$("li").toArray() for (i=0;i<x.length;i+) alert(xi.innerHTML); );六 创建元素$("<span/>") 或 $("<span></span>")document.createElement("span")七 日常笔记示例一：var as = $("ul > a"); /找到ul中下所有的<a>节点 as.click(function() /这里需要找到当前ul

13、中的<li>，然后让<li>显示出来 var aNode = $(this); /获取当前被点击的<a>节点 var lis = aNode.nextAll("li"); /找到当前<a>节点所有的<li>兄弟节点 lis.toggle("show"); /让子节点显示或隐藏);/load() 加载$(this).attr("id")的html片段$("li > a").click(function() $("#content")

14、.load($(this).attr("id") );Html部分<body><ul><a href="#">我是菜单1</a><li><a href="#" id="JQueryAutoComplete.html">我是子菜单1</a></li><li><a href="#" id="JQueryEdit.html">我是子菜单2</a><

15、;/li></ul><ul><a href="#">我是子菜单2</a><li><a href="#">我是子菜单3</a></li><li><a href="#">我是子菜单4</a></li></ul><div id="content"></div></body>示例二：/在页面装载是让所有的td都拥有一个点击事件$

16、(document).ready(function() var tds = $("td"); /找到所有的td节点 tds.click(tdclick); /给所有的td节点增加点击事件);/td的点击事件function tdclick() var td = $(this);/保存当前的td节点 var text = td.text();/1.取出当前td中的文本内容保存起来/2.清空td中的文本内容 td.html("");/第一种 /td.empty();/第二种 var input = $("<input>");/

17、3.建立一个文本框 也就是input的元素节点 input.attr("value", text);/4.设置文本框的值是保存起来的文本内容 input.keyup(function(event) /4.5 让文本框能够响应键盘按下的事件 /0 获取当前用户按下的键值，解决不同的浏览器获取时间的对象的差异 var myEvent = event | window.event; var kcode = myEvent.keyCode; if (kcode = 13)/1 判断是否是回车按下 /var inputnode = $(this); /var inputtext =

18、inputnode.val(); var inputtext = input.val();/2.获取当前文本框的内容 /var tdNode = inputnode.parent(); var tdNode = input.parent(); tdNode.html(inputtext); /4.将保存的文本框的内容填充到td中 tdNode.click(tdclick); /5.让td重新拥有点击事件 ); /5.把文本框加到td中去，也可以用input.appendTo(td); td.append(input); /5.5让文本框中的文字被高亮选中,需要将jquery的对象转换为dom对

19、象 var inputdom = input.get(0); inputdom.select(); /6.清除td上注册的点击事件 td.unbind("click");Html部分<body><!-一个简单的表格，一行两列，我们让表格里的数据点击后可以修改-><table><tbody><tr><td>123321</td><td>123456</td></tr></tbody></table></body>示例三：描

20、述:在一个div上缓存取数据HTML 代码:<div></div>jQuery 代码:$("div").data("blah"); / undefined 取$("div").data("blah", "hello"); / blah设置为hello 设$("div").data("blah"); / hello$("div").data("blah", 86); / 设置为86$("

21、;div").data("blah"); / 86$("div").removeData("blah"); /移除blah$("div").data("blah"); / undefined示例四：ajax服务器传回来的数据解析方式*在原生的ajax中用javascript原生的方式将服务器传回来的xml数据解析成dom对象的方式是：var domObj =xmlhttp.responseXML; /<message>1231234</message>if(do

22、mObj) /dom中利用getElementsByTagName获取元素节点,返回的是一个数组 var messageNodes= domObj.getElementsByTagName("message"); if(messageNodes.length>0) /获取message节点中的文本内容 /message标签中的文本在dom中是message标签对应的元素的子节点，firstChild可以获取到当前节点的第一个子节点 /通过以下方式就可以获得到文本内容所以对应的节点 var textNode = messageNodes0.firstChild; /对于文本节点来说，可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; /将数据显示在页面上 /通过dom方式找到div标签所对应的元素节点 var divNode = document.getElementById("result

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论