现在的位置: 首页 > 综合 > 正文

jquery基础

2014年08月06日 ⁄ 综合 ⁄ 共 9647字 ⁄ 字号 小 中 大 ⁄ 评论关闭
本文转自http://yianerzhong.blog.sohu.com/107608793.html
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="http://blog.163.com/wumingli456@126/blog/#">落</a>一</p>     直接关系 
$("a").parents("p") 可以找到<p>段<em><a href="http://blog.163.com/wumingli456@126/blog/#">落</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。可以这样操作

XML/HTML代码
  1. <input type='button' id='myBtn'>   

这是一个button，现在我们要为他添加一个事件

JavaScript代码
  1. <script>       
  2. $('#myBtn').bind("click",function(){       
  3.      alert('click');       
  4. });       
  5. </script>     

这样，我们就为这个button绑定了一个click的事件。

bind函数可以有三个参数，当第二个参数不是一个函数，而是一个数据对象时，它将默认做为bind第三个参数（函数）的参数。例如：

JavaScript代码
  1. <script>      
  2. function showAlert(events){       
  3.      alert(events.data.foo);       
  4. }       
  5. $('#myBtn').bind('click',{foo:'click'},showAlert);       
  6. </script>     

点击时，同样会显示:click

这些就是bind的一些基本用法，当然还有一些方法

比如在绑定方法的时候，用的是return false;可以让这个方法失效

JavaScript代码
  1. <script>       
  2. $('#myBtn').bind('click',function(){       
  3. return false;       
  4. })       
  5. </script>     

这样，刚才绑定的click又失效了，不过，这种方法往往用在submit提交的时候比较多。

还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation

例：

JavaScript代码
  1. <script>   
  2. $('#myBtn').bind('click',function(event){   
  3. event.preventDefault();//取消默认的click行为   
  4. });   
  5. $('#myBtn').bind('click',function(event){   
  6. event.stopPropagation();//阻止click事件起泡   
  7. });   
  8.   
  9. </script>  

jquery radio,checkbox,select操作

JavaScript代码
  1. 获取一组radio被选中项的值      
  2. var item = $('input[@name=items][@checked]').val();      
  3. 获取select被选中项的文本      
  4. var item = $("select[@name=items] option[@selected]").text();      
  5. select下拉框的第二个元素为当前选中值      
  6. $('#select_id')[0].selectedIndex = 1;      
  7. radio单选组的第二个元素为当前选中值      
  8. $('input[@name=items]').get(1).checked = true;      
  9.       
  10. 获取值：      
  11.       
  12. 文本框，文本区域：$("#txt").attr("value")；      
  13. 多选框checkbox：$("#checkbox_id").attr("value")；      
  14. 单选组radio：    $("input[@type=radio][@checked]").val();      
  15. 下拉框select： $('#sel').val();      
  16.       
  17. 控制表单元素：      
  18. 文本框，文本区域：$("#txt").attr("value",'');//清空内容      
  19.                   $("#txt").attr("value",'11');//填充内容      
  20.       
  21. 多选框checkbox： $("#chk1").attr("checked",'');//不打勾      
  22.                   $("#chk2").attr("checked",true);//打勾      
  23.                  if($("#chk1").attr('checked')==undefined) //判断是否已经打勾      
  24.       
  25. 单选组radio：     $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项      
  26. 下拉框select：    $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项      
  27.                  $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option      
  28.                  $("#sel").empty()；//清空下拉框      

http://docs.jquery.com/UI 

所有效果说明： 
基本的鼠标互动： 
拖拽(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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞