1. 对象获取与赋值::$("#obj").val("Hello World!");

2. 对象的显示与隐藏:$("#obj").show(); $("#obj").hide();

3. 添加属性:$("#obj").attr("disabled","disabled");

4. 移除属性:$("#obj").removeAttr("disabled");

5. attr和prop的区别:attr适用于自定义的DOM属性,而prop则用于元素的固有属性,如:id,value等;

6. 查找元素:方法1:$("#obj").find("option:eq(0)").html();--(以select为例)

       方法2:$("#Tab").children("tr:eq(1) td:eq(1)").html();--(以Table 为例)

方法1和方法2的区别:children只能获取当前元素的下级元素,获取不到下下级, 所以方法1获取不到值,而find获取所有的下级元素,所以要想用children达到find的效果,必须使用多次.children(xx);

*JQuery根据对象ID查找元素:$(父元素).find("#ObjID").html()

7. 选择器:$("#obj").find("option:eq(0)")选择obj对象的第一个<option>元素,index 值从 0 开始;

8. 鼠标进入和退出事件:$("#Tab").hover(”进入时执行的操作“,”退出时执行的操作“);

9. 对象添加判断与移除CSS样式:$("#obj").addClass("CssStyle"); $("#obj").hasClass("CssStyle");  $("#obj").removeClass("CssStyle");

10. JQuery遍历:$("#obj").each function(){  //执行操作如:alert($(this).text());})

切换元素的可用状态:$(“#obj”).toggle(speed,callback,switch);

    如:$(“#Obj”).toggle(0,function(){alert('Hello World!');},switch);

    第一个参数:0为快速显示或隐藏,数值越大,显示或隐藏越慢;

    第二个参数:显示或隐藏完成后调用的回调方法;

    第三个参数:是否显示或隐藏元素,值为:True/False;

    PS.第一个参数和第三个参数互斥,设置第二个参数必须设置第一个参数;

11. JQuery验证:

//This method is used to define the validate,Please note invoke this method when load this page

jQuery.validator.addMethod("decimal", function (value, element) {

   var decimal = /^-?\d+(\.\d{,})?$/;

   return this.optional(element) || (decimal.test(value));

});

$("#editRangeForm").validate({

   rules: {

       firstValueEdit: {

          decimal: true

                  //Define by user

       },

       consecutiveValueEdit: {

          digits: true,

          max: 

          //JQuery default

       }

   messages: {

       firstValueEdit: {

          decimal: "Invalid range value."

          //Error message definited by user

       },

       consecutiveValueEdit: {

          digits: "Invalid consecutive reading(s).",

          max: "Consecutive reading(s) should be less than 50."

          //Error message definited by user

       }

   },

   //The container is used to render the error message
errorLabelContainer: "#rangeErrMsg ul", wrapper: "li", //The label is used to wrap the error message submitHandler: function (form) {
//Do other things where validation is successful
Alert('Validation is successful!You can do the next step in this method!'); } });

12. JQuery同步与异步:默认情况下,JQuery采用异步的方式即:async为true;

(*以下示例中,如果设置为异步而且第一个方法执行时间大于第二个方法,则先弹出:SumB=55)

$(function () {

        $.ajax({

            type: "post",

            url: '@Url.Action("ActionNameA", "ControllerName")',

            datatype: "json",

            data: { TaskDeviceType: DeviceType },

            async: true,

            success: function (mess) {

                A();

            }

        });

        $.ajax({

            type: "post",

            url: '@Url.Action("ActionNameB", "ControllerName")',

            datatype: "json",

            data: { TaskDeviceType: DeviceType },

            async: true,

            success: function (mess) {

                B();

            }

        });

    });

    function A() {

        var SumA = ;

        for (var i = ; i <= ; i++) {

            SumA += i;

        }

        alert("SumA=" + SumA);

    }

    function B() {

        var SumB = ;

        for (var j = ; j <= ; j++) {

            SumB += j;

        }

        alert("SumB=" + SumB);

    }

13. JQuery中CSS()用法:

$("#obj").css("background-color");   //获取对象的背景色

$("#obj").css("color", "gray");  //设置对象颜色,同理,也可以通过定义CSS样式属性变量给对象添加属性,如下所示:

<script type="text/javascript">
var DTCss = {
background: 'blue',
height:'100px';
width: '100px';
};
$("#Obj").css(DTCss);
</script>

14. JQuery中toggleClass用法(实例来自W3C)

一个参数示例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:%;
color:red;
}
</style>
</head> <body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>

两个参数示例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main",true);
});
});
</script>
<style type="text/css">
.main
{
font-size:%;
color:red;
}
</style>
</head> <body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>

15. JQuery判断Checkbox是否被选中:

if ($("#obj").is(':checked'){..;}

16. 页面刷新:

A. location.reload(true); B.location.assign(location);

17. JQuery操作Select控件:

获取选中的值:$("#obj").find("option:selected").val();
        获取选中的文本:$("#obj").find("option:selected").text();
        根据Value设置选中的项:$("#obj").val(2);
        清空下拉列表:$("#obj").empty();

18. 通过CSS样式操作对象:

  $(".CssStyle").click(function () {
            --operation;
      });

JQuery基础汇总的更多相关文章

  1. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  2. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  3. Web前端JQuery基础

    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...

  4. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  5. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  6. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  7. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  8. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  9. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

随机推荐

  1. Uva 1103 古代象形文字

    题目链接:http://vjudge.net/contest/140550#problem/B 紫书P163. 1.根据16进制图转成2进制图. 每个点dfs一下,马上就把最外围的连通分量编号求出来了 ...

  2. 操作SQLite的dbhelper

    操作SQLite的dbhelper public class DbHelper { string connStr = @"Data Source=" + System.Enviro ...

  3. 403.14-Forbidden Web 服务器被配置为不列出此目录的内容及Login on failed for "IIS APPPOOL\ASP.NET v4.0"问题

    问题1: 发布mvc3报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 折腾了半天,提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. ...

  4. WebForm分页浏览

    1.封装类 //封装类 using System; using System.Collections.Generic; using System.Web; /// <summary> // ...

  5. 织梦cms PHPcms 帝国cms比较

    现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System 现在建网站不需要请程序员从基础的程序开发做起 ...

  6. 【Web】写个HTML页面去调试HTTP接口方便些

    现在越来越多的系统基本SOA的思想,业务由许多小系统通过远程调用的方式串连起来,其中HTTP的接口在远程调用的方式中颇为常见.看过一些开发人员写完一些接口后,要么按照正常情况调用几次就交给调用方,要么 ...

  7. 在C++工程中设置全局函数

    在头文件中对该函数进行全局函数的声明: extern void Test(); 在cpp文件中进行函数的定义: void Test() { MessageBox(NULL,L"调用了C++的 ...

  8. centos 安装 mysql 5.6和workbench

    windows下安装mysql很简单,去官网找到.msi文件,一键安装就OK了. Centos下面安装Mysql5.6其实也是蛮简单的. 注意:centos6.5默认mysql版本是5.1的 1.添加 ...

  9. 传递给系统调用的数据区域太小。 (异常来自 HRESULT:0x8007007A)

    在做结构体向字节数组转换的时候,常遇到"传递给系统调用的数据区域太小"的错误,究其原因是因为英文与汉字的编码方式不同,一个汉字等于两个字节,而一个英文字母等于1个字节.所以,对于如 ...

  10. BZOJ 2132 圈地计划(最小割)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2132 题意:n*m的格子染色黑白,对于格子(i,j)染黑色则价值为A[i][j],白色为 ...