jQuery 基本用法
1)页面加载完成后开始运行do stuff when DOM is ready 中的语句!
$(document).ready(function() {
// do stuff when DOM is ready
});
实际工作的javascript的代码是这样的:
window.onload=function(){
document.getElementById("clickme").onclick=function(){
var parDom = this.parentElement;
}
2)选择器
选择一类元素
$("a")是一个jquery的选择器(selector)
$("")其中的字段就是元素的标记。比如$("div")就是<div></div>
click是函数对象的一个方法。方法为点击鼠标事件!
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$("div").click $("div")就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标单
击的时候 执行 alert("Hello World!");
3)选择器(selector)和事件(events)
选择DOM元素
选择一个ID为orderedlist的元素,相当于javascript中的document.getElementById("orderedlist"),jquery中只需要$("#id")其中的id为元素的ID,元素为任意元素!
addClass为把这个元素的css的class改为red
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
$("#id > xx") 这种表示ID的元素下的所有元素标记为xx的元素设置CSS的Class, id为元素的id xx为元素的标记例<div><li><a>等!
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
4)循环each
1.这个代码只是ID为form的表单执行reset()方法。
1 $(document).ready(function() {
2 // use this to reset a single form
3 $("#reset").click(function() {
4 $("#form")[0].reset();
5 });
6 });
但是万一你有很多个表单需要执行呢?那么你可以这样写:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
2.选取 class 为 "checkbox2" 的所有选中元素,由多个<input type="checkbox" name="checkbox" value="<c:out value="${quote[0]}" />" class="checkbox2"/>组成:
var str="";
$(".checkbox2:checked").each(function(){
str+=$(this).val()+",";
});
3.选取所有radio,判断是否选中状
$(":radio").each(function () {
if ($(this).attr("checked")) {
alert("选中");
}
else {
alert("未选中");
}
})
5)属性操作attr() 方法
1.改变图像的 width 属性:
$("button").click(function(){
$("img").attr("width","180");
});
2.通过全选Checkbox,改变子Checkbox的选择:
if($("#checkbox1").attr("checked")==true){
$(".checkbox2").attr("checked",'true');//全选
}else{
$(".checkbox2").removeAttr("checked");//取消全选
}
3.设置某一元素的隐藏和可见属性:
$("#Zhongzhi").hide();
$("#Zhongzhi").show();
4.设置CheckBox的checked(选中)属性:
$(function () {
// 全选
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
}); // 全不选
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
}); // 反选
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
}); // 提交
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
}
});
alert(result.join(","));
});
});
5.在按钮提交前和提交后改变按钮的disabled(不可用)属性
$("#exportData").unbind("click");
$("#exportData").bind("click",function() {
$("#exportData").attr("disabled","disabled");
var url = "reportView.do?method=exportReportData&dataDate=<c:out value='${dataDate}'/>&reportId=<c:out value='${reportId}'/>&organId=<c:out value='${organId}'/>&levelFlag=<c:out value='${levelFlag}'/>&canEdit=<c:out value='${canEdit}'/>";
$.post(url,'',function(data){
if(data=="ok") { $("#exportData").removeAttr("disabled");
window.location.href = "reportView.do?method=downloadExcel&dataDate=<c:out value='${dataDate}'/>&reportId=<c:out value='${reportId}'/>&organId=<c:out value='${organId}'/>&levelFlag=<c:out value='${levelFlag}'/>";
}
});
});
6)取值操作val()和html()
val()常用来操作标准的表单组件对象,如button,text,hidden
html()取得第一个匹配元素的内容,简单来说就是所取得的标签所包含的所有东西。
function alldaochu(){
var str="";
$(".checkbox2:checked").each(function(){
str+=$(this).val()+",";
});
if(str==""||str==","){
alert("请选择后导出");
}else{
$("#daochuinp").val(str);
$("#daochu").submit();//表单提交
}
}
7)Ajax局部刷新
$.ajax({
type: "POST",
url: "xxxAction.do?method=xxMethod",
data: "pkid=" + pkid,
success: function(jsondata){
if(jsondata.msg=="success"){
$("#status"+pkid).val(jsondata.status);
$("#totime"+pkid).val(jsondata.sendtime);
$("#fromtime"+pkid).val(jsondata.receivetime);
$("#send"+pkid).attr("disabled","disabled");
} else if (jsondata.msg=="failed")
{
$("#status"+pkid).val(jsondata.status);
$("#totime"+pkid).val(jsondata.sendtime);
$("#send"+pkid).removeAttr("disabled");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
})
发送一个AJAX请求,其中ACTION中这样响应:
JSONObject jo = new JSONObject();
jo.put("msg", "success");
jo.put("status", "发送完成");
responseJson(response, jo);
protected void responseJson(HttpServletResponse response, JSONObject jo)
throws IOException {
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(jo.toString());
response.getWriter().flush();
response.getWriter().close();
也可以这样写:
function ajaxaccount(ratetype,deptid){
$.post("mainAction.do?method=accountlist", {
ratetype:ratetype,
deptid:deptid
}, function(data[accountlist方法返回值]) {
var accountlist=data.accountlist;
var oppaccountlist=data.oppaccountlist;
var yuee=data.yuee;
if(ratetype=='1'||ratetype=='2'){
toacccountval("account",accountlist);
toacccountval("oppaccount",oppaccountlist); }else{
toacccountval("account2",accountlist);
toacccountval("oppaccount2",oppaccountlist);
$("#huoqiyuee2").html(yuee);
}
},'json');
}
下面这个例子是,用ajax实现,动态填充下拉列表<select></select>
function identitychange() {
var Identity = $("#Identity").val();
if (Identity != 0) {
$.post("rateListAction.do?method=getdeptlist", {
Identity : Identity
}, function(data) {
var searchlist = data.deptlist;
var stemp = "<option value='0'>全部</option>";
if (typeof (searchlist) != undefined) {
for (var i = 0; i < searchlist.length; i++) {
stemp += "<option value='"+searchlist[i].deptid+"' >"
+ searchlist[i].deptname + "</option>";
}
}
$("#dept").html(stemp);
}, 'json');
} else {
$("#dept").html("<option value='0'>全部</option>");
}
}
不过$.post方法最终实现还是$.ajax:
post: function( url, data, callback, type ) {
if ( jQuery.isFunction( data ) ) {
callback = data;
data = {};
} return jQuery.ajax({
type: "POST",
url: url,
data: data,
success: callback,
dataType: type
});
},
jQuery 基本用法的更多相关文章
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jquery cookie 用法
jquery cookie 用法 $.cookie("name","value","options") 当不设置options时,此coo ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- JQuery datepicker 用法
JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...
- jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...
- jquery.post用法补充(type设置问题)
jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...
- jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器
jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...
- jQuery 动画用法
jQuery动画: <head> <meta charset="UTF-8"> <title>Title</title> <s ...
- jquery cookie用法
jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...
随机推荐
- Istio安全-认证(istio 系列七)
Istio安全-认证 目录 Istio安全-认证 认证策略 配置 自动mutual TLS 全局启用istio的mutual TLS STRIC模式 卸载 针对单个命名空间或负载启用mutual TL ...
- Ethical Hacking - POST EXPLOITATION(1)
METERPRETER BASICS >help - shows help >background - backgrounds current session >sessions - ...
- iconfont - 好用免费的图标库
某里出品 打开首页???????搜索框在哪里 网站:点我
- java基础知识--环境变量配置
说到java,大家应该都了解:J2SE基础.J2ME嵌入式.J2EE延伸的内容,而我们平时接触和所谈大部分都是J2EE企业级应用开发. 作为开发者,使用java之前,必须安装java开发环境,配置ja ...
- Nginx/Httpd负载均衡tomcat配置
在前一篇博客中我们聊了下用Nginx和httpd对后端tomcat服务做反代相关配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13334180.html: ...
- 微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
(一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregi ...
- 10个Vue开发技巧助力成为更好的工程师·二
优雅更新props 更新 prop 在业务中是很常见的需求,但在子组件中不允许直接修改 prop,因为这种做法不符合单向数据流的原则,在开发模式下还会报出警告.因此大多数人会通过 $emit 触发自定 ...
- ASP.NET WebAPI2复杂请求跨域设置
ASP.Net Core的跨域设置比较简单 官方都整合了 具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cor ...
- OpenWrt 编译分割
本文主要参考:http://macbruins.com/2011/05/08/downloading-sources-for-building-openwrt/ OpenWrt系统在buildroot ...
- java基础(二)--main方法讲解
main()函数是如下的固定格式,除了args可以修改名字,其余均不可以修改 public class TestBase02MainMath { public static void main(Str ...