- 浏览: 57959 次
- 性别:
- 来自: 北京
最新评论
-
tucailing:
非常感谢分享,很有用
ext2.2版本 -
taga:
写的太零碎了。。。。。
jquery学习笔记 -
ihqn19:
好东西,我正好看到这一章,书上写得不明不白。一看你这个就懂了好 ...
jquery学习笔记 二 -
shang548:
可以下载,我都下了好几个了,我用迅雷下的!大家可以尝试下,就是 ...
开发人员常用CHM帮助文档下载 -
zhengshuangxi1226:
不错,学习了一下。
jquery 常用操作
jquery基本入门
1.html()与.text()
.html()取得第一个匹配元素的html内容。会带有标签,.text()仅是里边的文本
.text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本
2.
$("a")选择所有的连接
$(".a")选择所有class="a"的标签
$("#a")选择id="a"的标签
3.
$("span[@name=a]")选择了<span name="a"></span>
$("span[@love=a]")选择了<span love="a"></span>
$("li#a") 选择了<li id="a"><li>
$("li.a") 选择了<li class="a"><li>
$("li .a") 选择了<li class="a"><span class="a">span被选择了</span><li>
由于可以看出 连在一起是指li并且class="a" 中间有空格是指<li>下的class="a"的元素,同CSS选择器的道理一样
$("div[@id=form]").hide("slow");找到<div id="form"><span></span></div>
$("div[@id=form]").children().hide("slow")找到<div id="form"><span>span才是被找到</span></div>
并隐藏
$("h1:contains('换个写法')")找到<h1>换个写法</h1>
$("h1
:contains('换个写法')")找到
<h1><span>换个写法</span></h1><br />
由此可以看出,连在一起是找h1中包含'换个写法'的内容,有空格是找<h1>的下一级元素中含中'换个写法'的内容
4.
$("ul>li:odd") 偶数行
$("ul>li:even") 奇数行
5 var
a=$("select[@name=class] option[@selected]");
var
b=$("select[@name=class1]");
b.append(a);
从一个下拉列表把内容放到另一个下拉列表里
6
$("a").parent("p") 只能找到<p>段<a
href="#">落</a>一</p> 直接关系
$("a").parents("p")
可以找到<p>段<em><a href="#">落</a></em>二</p> 所有的父
$("p").eq(0)找到第一个p
$("p:eq(0)")同上
$("p:visible") 所有可见的p
7
$("div:first") 找到第一个div
$("div:first-child") div的父元素的第一个元素是div才匹配
以上基本上是写了下选择器,更多参考
http://docs.jquery.com/Selectors
第二天:ajax相关
首先看下json,当然ajax可以返回xml.html,json等
json_encode后的数据格式总结
一,对象
结果为hash表,就是{"键":"值","键":"值"}这样的形式,为js可以识别的对象
二,一维索引数组
结果为数组['元素一','元素二'],为js可以识别的数组
三,一维相关数组
结果为hash表,为js可以识别的对象
四,多维索引数组
结果为[["a","b"],["c","d"]]这样的形式,为js可以识别的数组
五,多维相关数组
结果为[{"1":"a","2":"b"},{"1":"c","2":"d"}],外边是js可以识别的数组,中间是hash
对于hash的处理方式
<script>
var
json={"title":"a","name":"b","age":"c"};
alert(json.age);
</script>
对于数组的处理方式
<script>
var json=["a","b","c"];
alert(json[1]);
</script>
之所以总结,是因为我对这些不熟,遇到这样子的我就套上这些
OK,现在开始看jquery处理ajax
$.ajax()为通用方式
其中间必须是一个hash表即,形式为{键:值,键:值}的形式
参数
type:请求方式,默认为get,如:type:"post"
url :ajax请求的url 如:url :"ajax.php"
也可以是url:"ajax.php?id=5"这样子id可以通过$_GET['id']得到
data:传递的参数:
如:data:"name=terry&age=30" 具体如何得到数据($_GET[],$_POST[])取决于上边的type.
如:data:{name:"terry",age:"30"},此种形式会转成"name=terry&age=30"
dateType:返回数据的方式,默认为html,
>>>>>>>>如果返回json下边有个例子是处理这种类型的返回的数据<<<<<<<<
ifModified:默认为false,如果为true,当数据没有变化时请求不成功
error:请求失败是执行的函数
timeout:请求的时间,超过此时间,请求失败
complete:请求结束后执行的函数,不管请求成功或失败
第三天:
昨天写了下ajax的通用方法:今天看下其它的方法
load(url,[data],[callback]),
默认是GET方式:如果load("ajax.php")用GET方式提交数据;
如果有任何参数:如load("ajax.php","name=terry");刚用post方式提交数
$.get(url,[data],[callback])用get方式向远程页面传递参数
如
$.get('ajax.php',{name:"terry",id:5},function(msg){
$("#content").html(msg);
})
以GET方式得到数据并放到层id为content的层中
$.post(url,[data],[callback])同上,但数据以post方式提交
$.getJSON(url,[data],[callback])
以get方式获得json数据,这里重点写下:
如果返回的数据为数组
如["a","b","c"]处理方式
$.each(["a","c","c"].function(i){alert(this)})
返依次弹出a,b,c
如果返回的数据为hash对象
如{"name":"terry","age":"25"}处理方式
$.each(msg,function(i){
alert(i+"="+this);
})
刚依次弹出name=terry,age=25
就是说对于数组,i为0.1.2等,对于hash对象i为键
如果返回的数据外边是数组,里边是hash对象
[{"name":"terry","age":"25"},{"name":"abc","age":"30"}],刚处理方式
function
jq(){
$.getJSON('ajax.php',function(msg){
$.each(msg,function(i){
$.each(this,function(j){
alert(j+this);
});
})
})
}
一个处理时的效果
function jq(){
$.get('ajax.php',function(msg){
$("#content").html(msg);
$("#con").html("处理结束");
});
$("#con").html('处理中......');
}
jQuery的bind函数
jQuery学习之bind
在jQuery里面,直接用bind函数和unbind函数为某个DOM或者HTML标签等绑定一个操作和移除一个事件就行了。
例如为一个button添加一个click。可以这样操作
- < input type = 'button' id = 'myBtn' >
这是一个button,现在我们要为他添加一个事件
- <script>
- $( '#myBtn' ).bind( "click" , function (){
- alert( 'click' );
- });
- </script>
这样,我们就为这个button绑定了一个click的事件。
bind函数可以有三个参数,当第二个参数不是一个函数,而是一个数据对象时,它将默认做为bind第三个参数(函数)的参数。例如:
- <script>
- function showAlert(events){
- alert(events.data.foo);
- }
- $( '#myBtn' ).bind( 'click' ,{foo: 'click' },showAlert);
- </script>
点击时,同样会显示:click
这些就是bind的一些基本用法,当然还有一些方法
比如在绑定方法的时候,用的是return false;可以让这个方法失效
- <script>
- $( '#myBtn' ).bind( 'click' , function (){
- return false ;
- })
- </script>
这样,刚才绑定的click又失效了,不过,这种方法往往用在submit提交的时候比较多。
还有一些方法可以取消默认行为和阻止事件起泡:preventDefault 和stopPropagation
例:
- <script>
- $( '#myBtn' ).bind( 'click' , function (event){
- event.preventDefault(); //取消默认的click行为
- });
- $( '#myBtn' ).bind( 'click' , function (event){
- event.stopPropagation(); //阻止click事件起泡
- });
- </script>
jquery 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的项目为当前选中项
- $( "<option value='1'>1111</option><option value='2'>2222</option>" ).appendTo( "#sel" ) //添加下拉框的option
- $( "#sel" ).empty(); //清空下拉框
所有效果说明:
基本的鼠标互动:
拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果:
手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条
(sliders)、表格排序(table sorters)、页签(tabs)
放大镜效果(magnifier)、阴影效果(shadow)
第一部分:鼠标交互
1.1 Draggables:拖拽
所需文件:
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
用法:文件载入后,可以拖拽class =
"block"的层
$(document).ready(function(){
$(".block").draggable();
});
draggable(options)可以跟很多选项
选项说明:http://docs.jquery.com/UI/Draggables/draggable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html
1.2 Droppables
所需要文件,drag drop
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
用法:
$(document).ready(function(){
$(".block").draggable({helper:
'clone'});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<br>Dropped!");
}
});
});
选项说明:http://docs.jquery.com/UI/Droppables/droppable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html
1.3 Sortables 排序
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法:
$(document).ready(function(){
$("#myList").sortable({});
});
dimensions文档http://jquery.com/plugins/project/dimensions
选项说明:http://docs.jquery.com/UI/Sortables/sortable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html
1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法:
$(document).ready(function(){
$("#myList").selectable();
});
选项说明:http://docs.jquery.com/UI/Selectables/selectable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html
1.5 Resizables改变大小
所需要的文件 ,此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法:
$(document).ready(function(){
$("#example").resizable();
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Resizables/resizable#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html
第二部分:互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法:
$(document).ready(function(){
$("#example").accordion();
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Accordion/accordion#options
选项实例:http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
2.2
dialogs 对话框
所需要的文件:
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js
用法:
$(document).ready(function(){
$("#example").dialog();
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Dialog/dialog#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html
2.3 sliders 滑动条
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js
用法:
$(document).ready(function(){
$("#example").slider();
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Slider/slider#options
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html
2.4 Tablesorter表格排序
所需要的文件
ui.tablesorter.js
用法:
$(document).ready(function(){
$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
选项实例:http://tablesorter.com/docs/#Demo
2.5 tabs页签(对IE支持不是很好)
所需要的文件
ui.tabs.js
用法:
$(document).ready(function(){
$("#example > ul").tabs();
});
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明:http://docs.jquery.com/UI/Tabs/tabs#initialoptions
选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
tabs
ext http://stilbuero.de/jquery/tabs_3/rotate.html
第三部分:效果
3.1 Shadow
阴影
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 Magnifier 放大
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html
发表评论
-
jquey用法总结
2009-08-13 16:42 1542一 下面介绍全页面刷新方法:有时候可能会用到 window. ... -
ext2.2版本
2008-10-10 16:00 2285Ext2.2正式发布了,刚 ... -
jQuery 选择器的使用
2008-09-25 23:08 4144http://www.qbencao.com/2008/04/ ... -
jqury技巧总结
2008-09-24 23:27 2864一、简介 1.1、概述 随着WEB2.0及ajax思想在互 ... -
待整理的jquery
2008-09-24 23:01 907jquery入门 2007.7.10 1.精准简单的选择对象( ... -
jquery资源
2008-09-07 21:41 867jquery插件 240多个 http://www.cnbl ... -
jquery学习笔记 二
2008-08-24 19:45 35528.8 输入掩码 1)以前我们是通过单元格在表格中的索引来 ... -
jquery学习笔记
2008-07-20 22:05 3604第一章 开始Jquery 在每个实例中需要领 ... -
jquery笔记(转载)
2008-07-20 10:01 1186jQuery入门第一步 指南(1)用jquery开始吧 ...
相关推荐
jQueryDemo(JQuery常用操作2005)jQueryDemo(JQuery常用操作2005)jQueryDemo(JQuery常用操作2005)
jquery常用操作.pdf
jQuery select checkbox radio等基本操作,包括的取值
主要介绍了jquery常用操作小结,需要的朋友可以参考下
jquery常用的表单操作很全很详细.rtf
JQuery 常用操作代码,学习jquery的朋友可以参考下。
jquery常用操作,jquery一些常用的操作,很实用哦
Jquery的常用方法,各种对Demo的操作。
JQuery常用工具集合为用户整理了众多jquery的插件,用户下载后可以直接使用,可以完美兼容各大浏览器,给用户编写代码带来无限便捷 个人把常用的一些jquery插件做了一个demo。 Jquery继prototype之后又一个优秀的...
一篇 jQuery 常用方法及函数的文章留存备忘。 jQuery 常见操作实现方式 $(“标签名”) //取html元素 document.getElementsByTagName(“”) $(“#ID”) //取单个控件document.getElementById(“”) $(“div #ID”) //...
jquery 常用操作方法这样的文件脚本之家发布的也比较多了,但每个人整理的不相同,大家可以参考脚本之家之前的发布的文章结合一下比较好。
可输可选下拉列表combobox 博文链接:https://log-cd.iteye.com/blog/675158
jQuery 必须会的 常用操作 jQuery 必须会的 常用操作 jQuery,常用操作,函数 jQuery,常用操作,函数
jquery 使用 常用 文档 帮助 网上找的 最常用的 jquery 使用方法,保留下来,供大家下载使用
1、关于页面元素的引用; 2、jQuery对象与dom对象的转换;...8、操作元素的样式; 9、完善的事件处理功能; 10、几个实用特效功能; 11、几个有用的jQuery方法; 12、解决自定义方法或其他类库与jQuery的冲突。
最新!最有用!最牛B! 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、...注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可..........
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do ...