jQuery的引入与应用

来源：互联网发布：互联网大数据挖掘编辑：程序博客网时间：2024/06/06 04:11

1.jQuery：实质上是一个js类库，对常用的方法和对象进行封装，以方便调用。

2.jQuer调用：在javascript标签中，将src属性改为对应的jQuery源文件路径即可。

<script type="text/javascript" src="file:///C|/Users/lenovo/Desktop/webutil/jquery-2.0.2.min.js"><script/>

3.获取jQuery对象：$("选择器")，或者$(dom对象)可以把dom对象转换为jQuery对象

A：基本选择器

$("#id值")  $(".class值")  $("标签名")，多个选择器之间可以用逗号隔开

B：层次选择器

a b:a的所有b后代a>b:a的所有b孩子(不包括孙子)a+b:a的下一个兄弟(大兄弟)a~b:a的所有弟弟们

C：基本过滤选择器，使用时和基本选择器搭配，跟在基本选择器后例子：$("button:eq(0)")

:frist 第一个:last 最后一个:odd  索引奇数:even 索引偶数:eq(index) 指定索引:gt(index) >索引大于哪一个值:lt(index) <索引小于哪一个值

一般使用基本选择去器和基本过滤选择器集合即可操作大部分标签

4.jQuery中常用方法：

window.onload=function(){}  在页面加载完成后执行方法

$(selector).click(function(){...});  单击所选标签时执行方法

$(selector).dblclick(function(){...}); 双击所选标签时执行方法

$(selector).mouseover(function(){});   鼠标悬停时执行方法

$(selector).focus(function(){});       获得焦点时执行方法

$(selector).blur(function(){});       失去焦点时执行方法

jQuery应用实例：

<html>  <head>  <script type="text/javascript" src="jquery-2.0.2.min.js"></script>  </head>  <body>  <script type="text/javascript">  window.onload=function(){  $("button:eq(0)").click(function(){  alert(123);  });//单击按钮，弹出窗口  $("div:eq(0)").mouseover(function(){  $("#d1").append($("<marquee>鼠标移入<marquee/>"));  });//鼠标移入，在div中插入marquee标签  $("#d1").mouseout(function(){  $("#d1").append($("<marquee>鼠标移出<marquee/>"));  });//鼠标移出，在div中插入marquee标签  };  </script>    This is my JSP page. <br>    <div style="width: 300px;height: 300px ;border-style: solid" id="d1">    long may the sun shine!    </div>    <button id="b1">click</button>  </body></html>

阅读全文

0 0