菜单

JQuery基础之(2)首个JQuery程序

2019年5月17日 - Html/Html5

什么是jQuery?

一、    下载JQuery类库

JQuery是八个JavaScript函数库,主要包蕴以下职能:

下载地址:http://code.google.com/p/jqueryjs/downloads/list

一、HTML成分提取、操作

上面包车型地铁地址是总下载列表, 里面有无数本子和花色的jQuery库,
主要分为如下几类:

2、CSS操作

一)       min: 压缩后的jQuery类库, 
在规范遭受上使用.如:jquery-一.3.二.min.js

叁、HTML事件操作

2)       vsdoc: 在Visual
Studio中供给引进此版本的jquery类库才具启用智能感知.如:jquery-一.3.二-vsdoc贰.js

4、JavaScript特效和卡通片

三)       release包: 里面有未有缩减的jquery代码, 以及文书档案和示范程序.
如:jquery-一.3.二-release.zip

伍、HTNL DOM便利和改变

于今的新颖版本是1.三.二,那就先把壹.2.3版本的文书都下下来呢!

6、AJAX

 

7、Utillties

二、    第一个JQuery程序

 

一)       新建二个页面

JQuery语法:

贰)       并在该页面中引用下载到的jquery-1.3.2-vsdoc二.js文本

基础语法:$(selector).action

三)       代码如下:

①、英镑符号定义jQuery

<head runat=”server”>

2、选择符(selector)‘查询’和‘查找’HTML元素

    <title>第一个JQuery程序</title>

三、jQuery的action()推行对成分的操作

    <script type=”text/javascript”
src=”../Js/jquery-1.3.2-vsdoc2.js”></script>

实例

</head>

$(this).hide():隐藏当前因素

<body>

$(“p”).hide():  隐藏全数<p>成分

    <form id=”form1″ runat=”server”>

$(“p.test”).hide(): 隐藏全体 class=”test” 的 <p> 成分

    <div>

$(“#test”).hide() – 隐藏全部 id=”test” 的要素

        <div id=”divMsg”>hello world!</div>

语法

        <asp:Button ID=”btnShow” runat=”server” Text=”显示” />

$("*")

选取所有元素

$(this)

选取当前 HTML 元素

$("p.intro")

选取 class 为 intro 的 <p> 元素

$("p:first")

选取第一个 <p> 元素

$("ul li:first")

选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")

选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")

选取带有 href 属性的元素

$("a[target=’_blank’]")

选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!=’_blank’]")

选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button")

选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")

选取偶数位置的 <tr> 元素

$("tr:odd")

选取奇数位置的 <tr> 元素

        <asp:Button ID=”btnHide” runat=”server” Text=”隐藏” />

 

        <asp:Button ID=”btnChange” runat=”server”
Text=”改换divMsg中的内容” />

 

        <script type=”text/javascript”>

 

            $(“#btnShow”).bind(“click”,
function(event){$(“#divMsg”).show(); event.preventDefault();});

 

            $(“#btnHide”).bind(“click”,
function(event){$(“#divMsg”).hide(); event.preventDefault();});

 

            $(“#btnChange”).bind(“click”,
function(event){$(“#divMsg”).html(“作者改动了divMsg的源委”);
event.preventDefault();});

 

        </script>

 

    </div>

 

    </form>

 

</body>

 

4)       页面上有八个开关, 分别用来决定Hello
World的体现,隐藏和修改其内容,此示例使用了:

 

(1) jQuery的Id选择器: $(“#btnShow”)

 

(二) 事件绑定函数 bind()

 

(三) 呈现和隐藏函数. show()和hide()

 

(四) 修改成分内部html的函数html()

 

(伍) .preventDefault()事件,阻止暗许的程序实践

 

 

 

正文来源CSDN博客,转发请标明出处:http://blog.csdn.net/soldierluo/archive/2009/12/13/4954856.aspx

 

 

 

 

JQuery选用器的品种:

一、 成分选取器:$(“p”)

2、 #id选择器:#(“#p”)

3、.class选择器:$(“.p”)

 

JQuery事件:

页面前碰着区别访问者的响应叫做事件

常见的DOM事件:

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

 

blur

unload

 

 

 

 

 

 

 

 

 

常用的JQuery事件方法:

$(document).ready() 方法允许大家在文书档案完全加载完后施行函数。

click(): 是当单击开关时被触发调用三个函数;

dblclick(): 当双击开关是被触发调用的一个函数;

mouseenter(): 当鼠标指针穿过成分时接触的轩然大波;

mouseleave(): 当鼠标指针离开成分时接触的轩然大波;

mousedown(): 当鼠标指针移动到成分上方,并按下鼠标开关时接触的轩然大波;

mouseup(): 当在要素上甩手鼠标开关时接触的事件;

hover(): 用于模拟光标悬停事件;

focus(): 当成分获得主旨时接触的轩然大波

blur(): 当成分失去大旨时接触的轩然大波

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图