JQuery基础汇总
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基础汇总的更多相关文章
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- Web前端JQuery基础
JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
随机推荐
- vsftp 用无法登陆的用户名登陆（也叫虚拟用户）并进入到自己的文件夹test
1.不需要使用到PAM认证也可以,useradd redhat; usermod -s /sbin/nologin redhat; passwd redhat. 2.userlist_deny=NO; ...
- An Easy C Program Problem
找幸运数 题目描述 数字8最多的那个数为幸运数. 输入n和n个整数,找这n个数中的幸运数.在主函数中调用ndigit函数,判断某个整数x含数字8的个数.如果有多个幸运数输出第一个幸运数,如果所有的数中 ...
- userdebug版本开机串口log打开
在/bootable/bootloader/lk/app/mt_boot/mt_boot.c里修改: if (!has_set_p2u) { #ifdef USER_BUILD sprintf(cmd ...
- 查看Mac电脑的开机记录
回家以后,发现电脑前的地面上有烟灰.我记不住是不是我抽烟时掉的了.当然,如果不是我掉的,就是别人掉的了.要是别人掉的,估计是坐在我这玩儿电脑的时候掉的了.查一下开机记录吧.打开终端,输入“last|g ...
- Get与Post的一些总结
1.GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中. 2."GET方式提交的数据最多只能是1024字节这句话是错误的 URL不存在参数上限的问题,HTTP ...
- android 入门 006（sqlite增删改查）
android 入门 006(sqlite增删改查) package cn.rfvip.feb_14_2_sqlite; import android.content.Context; import ...
- Duilib实现GroupBox控件
转载:http://blog.csdn.net/asd313346541/article/details/47055113 原作者的源码上说:右边线和下边线显示不出来: 后来经过调试研究测试猜测应该是 ...
- drawRect导致内存暴增的真正原因
那么现在我们分析一下drawRect导致内存暴增的真正原因: 重写drawRect为何会导致内存大量上涨? 要想搞明白这个问题,我们需要撸一撸在 iOS 程序上图形显示的原理.在 iOS 系统中所有显 ...
- 开机logo切换逻辑深入研究
增加暗码命令切换开关机logo功能 u-boot logo显示原理: 1.----Little Kernel会在platform_early_init阶段首先会获取lcm params,其工作流 程就 ...
- 两个乒乓球队进行比赛，各出三人。甲队为a,b,c三人，乙队为x,y,z三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a说他不和x比，c说他不和x,z比，请编程序找出三队赛手的名单。
package C; public class Bisai { public static void main(String[] args) { String a="xyz",b= ...