jquery简单体验(zz)

最新推荐文章于 2023-04-25 14:43:01 发布
最新推荐文章于 2023-04-25 14:43:01 发布
阅读量674 收藏
点赞数
分类专栏： Ajax 文章标签： jquery function callback input ajax div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangtang_newton/article/details/5698497
版权

 

一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：
Java代码 复制代码
  1. var someElement = $("#myId");  
var someElement = $("#myId");

看起来比其他两个框架的要多了一个#，好，看看下面的用法：

Java代码 复制代码
  1. $("div p");(1)   
  2. $("div.container")(2)   
  3. $("div #msg");(3)   
  4. $("table a",context);(4)  
$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二，Jquery对象？
jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：
Java代码 复制代码
  1. var a = $("#cid");(1)   
  2. var b = $("<p>hello</p>");(2)   
  3. var c = document.createElement("table"); var tb = $(c);  
var a = $("#cid");(1)
var b = $("<p>hello</p>");(2)
var c = document.createElement("table"); var tb = $(c);

三，代替body标签的onload
这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：
Java代码 复制代码
  1. $(document).ready(function(){   
  2.   alert("hello");   
  3. });(1)   
  4.   
  5. <body οnlοad="alert('hello');">（2）  
$(document).ready(function(){
  alert("hello");
});(1)

<body οnlοad="alert('hello');">（2）

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。
四，事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。
Java代码 复制代码
  1. $(document).ready(function(){   
  2.   $("#clear").click(function(){   
  3.      alert("i am about to clear the table");     
  4.    });   
  5.   $("form[0]").submit(validate);   
  6. });   
  7. function validate(){   
  8.   //do some form validation  
  9. }  
$(document).ready(function(){
  $("#clear").click(function(){
     alert("i am about to clear the table");  
   });
  $("form[0]").submit(validate);
});
function validate(){
  //do some form validation
}

五，同一函数实现set&get
Java代码 复制代码
  1. $("#msg").html();   
  2. $("#msg").html("hello");  
$("#msg").html();
$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六，ajax
这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
Java代码 复制代码
  1. $.get("search.do",{id:1},rend);   
  2. function rend(xml){   
  3.     alert(xml);   
  4. } (1)   
  5. $.post("search.do",{id:1},rend);   
  6. function rend(xml){   
  7.     alert(xml);   
  8. } (2)   
  9.   
  10. $("#msg").ajaxStart(function(){   
  11.    this.html("正在加载。。。。");   
  12. });(3)   
  13. $("#msg").ajaxSuccess(function(){   
  14.    this.html("加载完成！");   
  15. });(4)  
$.get("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (2)

$("#msg").ajaxStart(function(){
   this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
   this.html("加载完成！");
});(4)

这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
七，渐入淡出
Java代码 复制代码
  1. $("#msg").fadeIn("fast");   
  2. $("#msg").fadeOut("slow");  
	$("#msg").fadeIn("fast");
	$("#msg").fadeOut("slow");

没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
八，plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。

九、HTML元素操作

//遍历option和添加、移除option
function changeShipMethod(shipping){
 var len = $("select[@name=ISHIPTYPE] option").length
 if(shipping.value != "CA"){
  $("select[@name=ISHIPTYPE] option").each(function(){
   if($(this).val() == 111){
    $(this).remove();
   }
  });
 }else{
  $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
 }
}


//取得下拉选单的选取值

$('#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//
记性不好的可以收藏下：
1,下拉框:

var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性，
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(this).val());
   });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾


当然jquery的选择器是强大的. 还有很多方法.

<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
       //alert("Hello");
       //alert($("#selectTest").attr("name"));
       //$("a").attr("href","xx.html");
       //window.location.href="xx.html";
       //alert($("#selectTest").val());
       alert($("#selectTest option[@selected]").text());
       $("#selectTest").attr("value", "2");

});
});
</script>


<a href="#">aaass</a>

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
                $("#txt").attr("value",'11');//填充内容
多选框checkbox： $("#chk1").attr("checked",'');//不打勾
                $("#chk2").attr("checked",true);//打勾
                if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
            $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
            $("#sel").empty()；//清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

yangtang_newton
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【jQuery】jQuery小结
韩丽萍
02-02 2601
前言    jQuery是个什么啊？是个框架。利用css选择器查找DOM对象,对其操作，操作样式或者增删方法等等。拥有强大的插件机制，可以使我们write less, do more。细数家珍（一）框架认识示例：//找到button按钮，注册事件 $("#verifyButton").click(function(){ //1.获取文本框的内容 var userName = $("#
jQuery总结
wb199811的博客
08-10 1822
第一章 jQuery概述 jQuery简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接
query.js:可以映射到不同查询语言实现的抽象查询语言
05-14
query.js 介绍 query.js是一种抽象查询语言，可以映射到不同的查询语言实现。 它可以在浏览器以及Node.js中运行。 安装 在Node.js上包括查询模块。 var query = require("query").query; var myQuery = query().eql("foo",3); 要在浏览器中使用，请包含query.js文件。 [removed][removed] Javascript模块 要创建一个新的查询实例，您有两个选择： var query = query(); var query2 = new Query(); 排序 按名称升序排列： var q = query() .sort("name"); 按名称降序排列： var q
jquery简单体验
像一颗晨土
11-13 154
[url=http://jquery.com/]Jquery[/url]是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是...
JS优化技巧
QVVVVVVVVVVVVVVV的博客
03-26 191
JS优化技巧1.带有多个条件的if语句2.简化if true ... else3.声明变量4. null、undefined 和空值检查5. null 检查和默认赋值6. if 判断值是否存在7. 比较后返回8. 箭头函数9. switch 简化10. 隐式返回11. 默认参数值12.数组 find 简化 1.带有多个条件的if语句 把多个值放在一个数组中，然后调用数组的 includes 方法。 // Novice if(x === 'abc' || x === 'def' || x === 'x
JavaScript的事件循环
qq_68155756的博客
02-14 472
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。 再Chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要再合适的时候将任务加入到队列末尾即可
利用JS实现简易ATM机
m0_62923580的博客
04-19 1666
1：里面现存有100块钱。 2：如果存钱，就用输入钱数加上先存的钱数,之后弹出显示余额提示框 3：如果取钱，就减去取的钱数，之后弹出显示余额提示框 4：如果显示余额，就输出余额 5：如果退出，弹出退出信息提示框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE...
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
jQuery交互体验社会化分享代码.zip
11-21
这些方法使得动态修改页面内容变得简单，从而提升交互体验。 2. 事件处理：jQuery简化了事件绑定，如`$("button").click(function() {...})`用于监听按钮的点击事件。通过事件处理，可以实现用户交互时的响应式动态...
使用jQueryEasyUI提升客户体验
01-04
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
js querySelector() 使用方法
11-26
querySelector 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性,
jquery.query.js
03-20
官方 jquery.query-2.1.7.js。
JQuery 初体验(建议学习jquery)
12-12
在JQuery的网站上发现，这个东东提供两种版本下载。一种是原版，接近120K，另一种是把水分压缩掉的，近60K。太久没做应用技术了，没想到居然出来了这么多新鲜玩意儿，JavaScript还可以压缩水分，所以顺便又去了解了...
jQuery简易分页插件代码.zip
最新发布
09-22
总结来说，jQuery简易分页插件是一个高效且易于定制的解决方案，可以帮助开发者快速实现网页的分页功能，提高用户体验。通过学习和理解这个插件的工作原理，不仅可以应用于现有的项目，还能提升对jQuery及其在网页...
JavaScript入门
web18296061989的博客
05-19 1727
文章目录 初识JS JS的引入 JS输入输出语句 变量的命名规范 运算符的优先级 断点调试 arguments的使用 JS预解析 对象 Web APIs 获取元素 事件 排它思想 例：百度换肤 getAttribute和setAttribute tab栏切换 自定义属性 节点操作 例：下拉菜单 评论留言案例 动态生成表格案例 方法监听注册事件 事件的删除 DOM事件流 事件对象 事件委托 其他常用的鼠标事件 跟随鼠标移动的图片 常见的键盘事件 模拟京东快递单号查询 BOM基本概念 窗口加载事件 调整窗
JavaScript基础
qvqqv的博客
04-25 71
JS获取元素，简单事件，数据类型，属性修改
一些常用的js函数
m0_62972853的博客
08-15 228
一些常用的js函数。
query.js 查询示例
easy4use
12-11 2062
目录 一. Query使用示例 1. 通过单个字段查询，model默认为“LK”，模糊查询，如果model值为EQ表示精确查询 2. 通过两个字段AND查询 3. 通过两个字段OR查询（三种方式） 4. 通过IN查询 5. 排序查询 6. 分页查询 7. 过滤查询字段 8.复杂查询 9.左（右）连表查询，ON后面添加过滤条件 10.query.js代码 一. Query使用示例 Query页面测试可在“系统工具-Query”页面上进行使用测试，下面列举了常用的几种查询使用示..
使用jQuery提升WordPress3.0网站体验
jQuery是一个强大的JavaScript库，它简化了JavaScript代码的编写，使得动态效果和用户交互变得更加简单。以下是一些关键知识点： 1. **jQuery基础知识**：首先，了解jQuery的基本语法和选择器是至关重要的。jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值