`
zisefeiniao
  • 浏览: 175017 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论
阅读更多

1、JQuery的基本语法

 

为页面加入jquery支持非常容易,只需要通过script标签将支持的js文件导入就可以了。

<script language="javascript" src="jquery-1.3.1.js"></script>

 

JQuery语法:

使用JavaScript方式取得的对象被称为DOM对象,而使用JQuery取得的对象,在这里称为JQuery对象。

 

1、通过JQuery方式取得页面元素。

       使用js可以通过getElementById、all.name、form.name等

       使用JQuery可以通过以下几种方式取得页面元素:

       1) 通过 #id的方式取得元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript" src="jquery-1.3.1.js"></script>

<script language="javascript" >

         function showValue() {

                   alert($("#mytext").val());

        

         }

</script>

</HEAD>

 

<BODY>

         输入姓名:<INPUT TYPE="text" NAME="name" id="mytext"> <br>

         <INPUT TYPE="button" value="提交" onclick="showValue();">

</BODY>

</HTML>

       注意需要使用$()将#id括起来,如果要取得value值,需要通过val()方法取得,而无法直接调用value属性。而且必须通过id来取得,而不能使用name属性。

 

       2)通过标签名称取得,直接将标签名放入$()中

<script language="javascript" >

         function showValue() {

                   alert($("input").val());

        

         }

</script>

       如果页面有多个元素,可以通过数组的方式取得其中的某一个

<script language="javascript" >

         function showValue() {

                   alert($("input")[1].value);

        

         }

</script>

       但是如果使用.val()取得值会出现错误,因为数组中返回的对象为DOM对象,而不是JQuery对象。所以这里只能按照DOM对象的方式进行处理。

 

       3) 依据class样式取得元素,需要将 .class 加入到$()中

<script language="javascript" >

         function showValue() {

                   alert($(".err").html());

        

         }

</script>

<style type="text/css">

         .err{

                   color:red;

                   font-size:12px;

         }

</style>

<span class="err">错误信息</span>

其中.html()方法的功能是取得span或div或td等元素的innerHTML属性,类似的还有.text()

 

       4)取得页面中的所有元素,$(“*”)

 

 

2、为元素设置和取得属性(相当于getter与setter方法)

       1) 特殊属性:

              innerHTML、innerText、value、class,对于这四个属性使用专门的方法进行处理。

       innerHTML:html(),取得和设置都使用该方法,不传参数的表示取得属性,传参数的表示设置属性

         function showValue() {

                   alert($(".err").html("新的信息"));

        

         }

       innerText:text(),value:val(),使用方法与html()相同

      

 

       class用来处理css样式

       使用addClass添加新的样式,使用removeClass删除样式,使用toggleClass来替换新的样式,都需要传入样式名称(注意不要加.)

 

       2) 普通的属性

       都使用attr方法来取得或设置属性,传一个参数表示取得该名称的属性值,传两个参数,表示为该属性设置一个新的值。

       使用removeAttr可以删除某一个属性。

<script language="javascript" >

         function showValue() {

                   alert($("input").attr("readOnly",""));

        

         }

</script>

         输入姓名:<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

 

 

3、事件处理。

       可以通过blur()等方法调用或设置某元素的事件

       <script language="javascript" >

       function showValue() {

              alert("原有方法"); 

       }

       function newValue() {

              alert("新的方法");

       }

       function changeFun() {

              $("#subbtn").click(newValue);

       }

</script>

<style type="text/css">

       .err{

              color:red;

              font-size:12px;

       }

       .ok{

              color:green;

              font-size:20px;

       }

</style>

</HEAD>

 

<BODY>

       输入姓名:<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

       <INPUT TYPE="button" value="提交" id="subbtn" onclick="showValue();"> <br>

       <INPUT TYPE="button" value="切换方法" onclick="changeFun();">

</BODY>

       但是在这里添加了方法后原有的方法并没有被删除,如果要删除,可以使用unbind方法进行删除

<script language="javascript" >

         function loadInit() {

                   $("#subbtn").click(showValue);

         }

 

         function showValue() {

                   alert("原有方法");      

         }

         function newValue() {

                   alert("新的方法");

         }

         function changeFun() {

                   $("#subbtn").unbind("click");

                   $("#subbtn").click(newValue);

         }

</script>

<style type="text/css">

         .err{

                   color:red;

                   font-size:12px;

         }

         .ok{

                   color:green;

                   font-size:20px;

         }

</style>

</HEAD>

 

<BODY onload="loadInit();">

         输入姓名:<INPUT TYPE="text" readOnly NAME="name" > <span class="err">错误信息</span> <br>

         <INPUT TYPE="button" value="提交" id="subbtn"> <br>

         <INPUT TYPE="button" value="切换方法" onclick="changeFun();">

</BODY>

       注意:事件必须是通过JQuery绑定的,如果直接使用html进行编写,则无法取消绑定

 

       补充:one方法,将一个事件绑定,但该方法只执行一次(一次性)

 

       JQuery中包含几个特殊事件:$(document).ready(),表示页面加载完成时自动调用的函数,里面需要传入一个function参数

       hover():模仿鼠标悬停事件,实际上就是onMouseOver + onMouseOut,

 

 

4、DOM对象与JQuery对象的转换

       DOM à JQuery : $(DOM对象)

       JQuery à DOM : JQuery对象[下标](如果只有一个,则下标为0)

 

 

2、在AJAX中使用JQuery开发,结合JSON

示例:修改之前的菜单联动

修改之前完成的JSONDemo,在列表显示页面,将调用方法修改

 

这里调用AJAX可以使用getJSON方法进行调用

       function showplus(upid) {

           // 参数分别为,URL路径、所传递的参数(使用JSON方式进行传递)

           $.getJSON("area.do",{"status":"showplus","upid":upid},showplusCallback);

       }

 

Action中的代码不需要修改,

       // 返回的值通过obj参数返回,直接返回的就是JSON对象

       function showplusCallback(obj) {

           // 先将下拉列表清空

           var select = document.getElementById("plus") ;

           select.options.length = 1 ;

           // 循环返回的areaplus数据

           for (var i = 0 ; i < obj.areapluses.length ;i ++) {

              var areaplus = obj.areapluses[i];

              // 建立option

              var option = document.createElement("option");

              // 设置value属性

              option.setAttribute("value",areaplus.id);

              // 设置显示内容

              option.appendChild(document.createTextNode(areaplus.title));

              // 设置下拉列表

              select.appendChild(option);              

           }

       }

测试时发现js出现错误,原因是由于json.js与jquery.js有冲突,因此这里需要将 json.js的导入代码删除。

    <script type="text/javascript" src="json.js"></script>

分享到:
评论

相关推荐

    jquery-3.6.0

    jquery-3.6.0

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....

    jQuery - 3.6.0

    jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作,事件处理,动画和Ajax等功能变得更加简单,它具有易于使用的API,可跨多种浏览器运行。凭借多功能性和可扩展性的结合,jQuery改变了数...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】

    jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】 jquery-3.6.0包合集下载 包含: jquery-3.6.0.js jquery-3.6.0.min.js jQuery是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码,...

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jQuery-3.5.1压缩版

    jQuery-3.5.1压缩版

    jquery-3.6.4.js

    jquery-3.6.4.js

    jquery.min.js 3.6.4版本

    jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的...

    jquery-migrate

    jQuery 迁移插件, Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...

    jquery-1.9.1.js

    jquery-1.9.1版本

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery-1.10.2.js

    贪吃蛇 (2)

    jquery验证码

    jQuery实现web开发验证码,无需后台验证。简单方便实用

    Jquery-3.7.1.min.js

    Jquery-3.7.1.min.js

    Jquery 本地版引用文件 适配3.6.1版本

    &lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.1.min.js"&gt; 官网jquery压缩版引用地址: &lt;script src="https://code.jquery.com/jquery-3.6.1.min.js"&gt;&lt;/script&gt; 下载后更改文件名,匹配引用连接...

    jquery-1.12.4.zip下载

    《jQuery 1.12.4:高效前端开发的得力助手》 jQuery,作为一款广泛使用的JavaScript库,自2006年发布以来,便以其简洁的API和强大的功能深受开发者喜爱。在这个标题为“jquery-1.12.4.zip”的压缩包中,包含的是...

    jQuery1.11.0_20140330_jquery_

    jQuery是一个JavaScript函数库。jQuery是一个轻量级的&quot;写的少,做的多&quot;的JavaScript库。jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM ...

    jQuery-3.6.0.min.js

    jQuery-3.6.0.min.js

Global site tag (gtag.js) - Google Analytics