jQuery学习笔记 - 基础知识扫盲入门篇

jQuery学习笔记 - 基础知识扫盲入门篇

2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑

1.为什么要使用jQuery?

提供了强大的功能函数
解决浏览器兼容性问题
实现丰富的UI
纠正错误的脚本知识

2.常用的知识点

jquery的id选择器：$("#btnShow")
事件绑定函数 bind()
显示和隐藏函数show() hide()
修改元素内部html的函数html()

仅仅凭借多浏览器支持这一特性，就足以让我们学习并使用jquery，因为如今想编写跨浏览器的脚本真的是一件困难的事情！

--系列化学习方法，加手动敲代码，加上自己的观念在里面加以变化--

而不是简单的复制，粘贴运行看效果，那样是学不好知识的。多多练习才是王道!!

3. jquery新特性
1.完美的js智能提示支持
2.功能强大的选择器
3.性能最佳的选择器
4.支持多种浏览器
5.优雅的链式语法 $(".myClass").css("color","red").show();
6.ajax操作 $("#divRequest").load("../data/ajaxGetCityInfo.aspx",{"resultType":"html"})
7.Datepicker日历控件
8.dialog对话框控件
9.tab控件
10.accordion手风琴菜单控件
11.progressbar进度条控件
12.slider滑动条控件
13.button按钮控件
14.autocomplete自动提示控件
15.易于扩展（基于jquery开发的日历框）
16.jquery mobile开发基于移动互联网平台的炫丽应用

4. dom对象，jquery包装集对比
var div = document.getElementById("testDiv");
var divs = document.getElementByTagName("div");

包装集 ${"#testDiv"} 上面语句构造的包装集只含有一个id是testDiv的元素。

1.dom转jquery包装集
var div = document.getElementById("testDiv");
var domToJQueryObject = ${div};

2.jquery包装集转dom
var domObject = $("#testDiv")[0]; //注意：通过索引器返回的不再是jquery包装集，而是一个dom对象。

5. jquery选择器分类
1.基础选择器basics    $("#divId"), $("a"), $(".bgRed"), $("#divId,a,.bgRed")
#id, element, .class, *, selector1,selector2,seletorN
2.层次选择器hierarchy
ancestor descendant   $(".bgRed div")
parent > child        $(".myList > li") 
prev + next           $("#hibiscus+ig")
prev ~ siblings       $("#someDiv~[title]")
3.基本过滤器basic filters
:first  匹配找到第一个元素    查找表格的第一行 $("tr:first");
:last   匹配找到最后一个元素  查找表格的最后一行 $("tr:last");
:not(selector) 去除所有与给定选择器匹配的元素  查找所有未选择中的input元素
 $("input:not(:checked)")
:even 匹配所有索引值为偶数的元素，从0开始计数。  查找表格的1.3.5行 $("tr:even");
:odd  匹配所有索引值为奇数的元素，从0开始计数。  查找表格的2,4,6行 $("tr:odd");
:eq(index) 匹配一个给定索引值的元素，从0开始计数。  查找第二行 $("tr:eq(1)")
:gt(index) 大于
:lt(index) 小于
:header 选择所有h1,h2,h3一类的header标签。 
 --给页面上所有的标题加上背景色：$(":header").css("background","#EEE");
:animated 匹配所有正在执行动画效果的元素。
4.内容过滤器
:content(text)
:empty 匹配所有不包含子元素或者文本的空元素。
:has(selector)    $("div:has(p)").addClass("test"); 给所有包含p元素的div元素添加一个text类.
:parent 匹配含有子元素或者文本的元素.
5.可见性过滤器visibility filters
:hidden
:visible
6.属性过滤器attribute filters
[attribute]  $("div[id]")  查找所有含有id属性的div元素.
[attribute=value] 匹配给定的属性是某个特定值的元素. $("input[name!='newsletter']").attr("checked",true);
[attribute^=value]  匹配给定的属性是以某些值开始的元素.
[attribute$=value]  匹配给定的属性是以某些值结尾的元素.
[attribute*=value]  匹配给定的属性是以包含某些值的元素.
[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器.
7.子元素过滤器child filters
:nth-child(index/even/odd/equation)
:first-child
:last-child
:only-child
8.表单选择器 forms
:input 匹配所有的input,textarea,select和button
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
9.表单过滤器form filters
:enabled   $("input:enabled")
:disabled  $("input:disabled")
:checked 匹配所有选中的元素(复选框,单选框,不包括select中的option)  $("input:checked")
:selected  $("select option:selected")

6. API文档
jQuery官方API: http://docs.jquery.com/
中文在线API: http://jquery.org.cn/visual/cn/index.xml
中文jQuery手册下载: http://files.cnblogs.com/zhangziqiu/jquery_api.rar

----------130615----------

7.目标，动态创建元素，管理jquery包装集，添加，删除，切片。

html dom创建元素,几乎所有的浏览器都兼容。

//使用dom标准创建元素
var select = document.createElement("select");
select.options[0] = new Option("加载项1","value1");
select.options[1] = new Option("加载项2","value2");
select.size = "2";
var object = testDiv.appendChild(select);

以下是jquery创建对象的方法
jquery(html,ownerDocument) returns:jquery

$("<div style=\"border:solid 1px #ff0000 \">动态创建的jquery对象div</div>");

传统方法，dom加载完毕后添加元素，弊端：
如果某个图片或者其他资源加载很长时间，访问者就会看到一个不完整的页面，甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。
代码：
window.onload=function(){testDiv.innerHTML = 
"<div style=\"border:solid 1px #ff0000 \">动态创建的jquery对象div</div>";}

//jquery使用动态创建的$(document).ready(function)方法
$(document).ready(
 function(){
   testDiv.innerHTML = "<div style=\"border:solid 1px #ff0000\">动态创建的div</div>";
 }
);

//简便语法
$(
 function(){
   testDiv.innerHTML = "<div style=\"border:solid 1px #ff0000\">动态创建的div</div>";
 }
);

1.过滤Filtering
$("p").eq(1)  //获取匹配的第二个元素
$("p").filter(".selected")  //保留带有select类的元素
$("div").filter(function(index){
 return $("ol",this).size() == 0;
});                         //保留子元素中不含有ol的元素
$("input[type='checkbox']").parent().is("form")  //由于input元素的父元素是一个表单元素，所以返回true
$("p").append($("input").map(
function(){
  return $(this).val();
}
).get().join(","))          //把form中的每个input元素的值建立一个列表。

$("p").not($("#selected")[0])  //从p元素中删除带有select的ID的元素
$("p").slice(0,1)  //选择第一个p元素

add(expr); 添加至匹配的元素
children([expr]); 查找每个子元素。
closest([expr]); 取得表达式匹配的最新的父元素
contents(); 查找匹配元素内部所有的子节点（包括文本节点）。
find(expr);  $("p span")与$("p").find("span")相同。
next(expr); 后面相邻的同辈元素
nextAll(expr); 同上
offsetParent(); 返回第一个有定位的父类
parent(expr); 父节点
parents(expr); 祖先元素
prev(expr); 前面相邻的同辈元素
prevAll(expr); 同上
siblings(expr); 同辈元素

串联 Chaining
andSelf()
end()

----------------------class4----------------------
8. 获取和操作元素的属性和css样式

dom属性和元素属性是有区别的。实际浏览器最后会将标签元素解析成dom对象，并且将元素的元素属性存储为dom属性，两者是有区别的。
举例：
如果要设置元素的css样式类，使用的是dom属性className而不是元素的class
img1.className = "classB";

javascript操作元素属性：getAttribute和setAttribute。
对应jquery
attr(name); 取得第一个匹配元素的属性值。如果没有相应的属性，则返回undefined。
attr(properties); 以名称/值对形式设置为所有匹配元素的属性。
    className属性而不是class，或者可以直接使用.addClass(class)和.removeClass(class)
    例如：$("img").attr({src:"test.jpg", alt:"Test Image"});
attr(key,value); 为所有匹配的元素设置一个属性值。
attr(key,fn);  fn表示提供一个函数，由这个函数计算的值作为属性值。
removeAttr(name); 从每一个匹配的元素中删除一个属性。

##修改css类##
addClass(class)
hasClass(class)
removeClass(class); 参数可选，如果不传入参数则移除全部的css类。
toggleClass(class); 如果存在就删除一个类，不存在就添加一个类。
toggleClass(class,switch); 当switch是true时添加类，否则为false时删除类。

--注意：addClass和removeClass一次可以传入多个css类，用空格分割。--

##修改css样式## 即修改元素属性style
css(name);  访问第一个匹配元素的样式属性。
css(properties);
css(name,value); 数字将自动转化为像素值。

常用属性值
1.宽和高相关 height and width
height();
height(val); 设置高度值
width();
width(val);
innerHeight();
innerWidth();
outerHeight([margin]);
outerWidth([margin])

2.位置相关 positioning
offset(); 在当前窗口的相对偏移，包括两个整形属性：top和left。
position(); 相对父元素的偏移，包括top和left。
scrollTop(); 相对滚动条顶部的偏移。
scrollTop(val); 设置垂直滚动条顶部偏移的值。
scrollLeft(); 相对滚动条左侧的偏移。
scrollLefe(val); 设置水平滚动条左侧偏移的值。

----------------------class5----------------------
document.getElementById("testDiv2").onclick = msg22;
等效于
<div id="testDiv2" onclick="alert("@@@22");">单击事件2</div>
实质上建立了一个匿名函数。
document.getElementById("testDiv2").onclick = function(event){
 alert("@@@22");
}
弊端
1.只能为一个事件绑定一个事件处理函数，使用=赋值会把前面为此事件绑定的所有事件处理函数冲掉。
2.在事件函数（无论是匿名函数还是绑定函数）中获取事件对象的方式在不同浏览器中要特殊处理。

以前的事件绑定模式
if(oTarget.addEventListener){  //for dom

}else if(oTarget.attachEvent){  //for ie

}

9. 事件处理函数
bind(type,[data],fn);
one(type,[data],fn); 一次性的事件处理函数.
trigger(event,[data]);
triggerHandler(event,[data]);
unbind(type,fn);

bind函数举例
function msg33(event){
  alert("Me电影: " + event.data.url);
}
$("#testDiv3").bind("click", {url:"http://www.medy.cc"}, msg33);

其他两种传值方式
1.自定义属性传值,但是通过不了w3c验证.
<div id="testDiv4" customer="http://www.uniqueue1.com">单击事件4</div>
$("#testDiv4").bind("click", function(event){
    alert($(event.target).attr("customer"));
   });

2.使用脚本传值
$("#testDiv4").bind("click", {customer2:"优一队列"},function(event){
    alert(event.data.customer2);
   });

trigger(event,[data])和triggerHandler(event,[data]);

##Event Helper##
click()和click(fn)分别用来触发单击事件和设置单击事件.
例如:
设置单击事件: $("#testDiv").click(function(event){alert("test div click!");});
等效于: $("#testDiv").bind("click",function(event){alert("test div click!");});
触发单击事件: $("#testDiv").click();
等效于: $("#testDiv").trigger("click");

其他Event Helper
blur()  blur(fn)
change()  change(fn)
click()  click(fn)
dblclick()  dblclick(fn)
error()  error(fn)
focus()  focus(fn)
keydown()  keydown(fn)
keypress()  keypress(fn)
keyup()  keyup(fn)
load()  load(fn)
mousedown(fn)  mouseenter(fn)  mouseleave(fn)  mousemove(fn)  mouseout(fn)  mouseover(fn)  mouseup(fn)
resize(fn)  scroll(fn)  select()  select(fn)
submit()  submit(fn)  unload(fn)

event.data, event.target, event.type

重要: hover(over,out); 应用于菜单.
toggle(fn,fn2,fn3,fn4,...);  //对象不支持此属性或方法.        jquery-1.9.1.min.js
注意: 不是triggle

css样式: style="cursor:pointer"

10. 使用jquery事件对象
所有的浏览器中通过event.target属性来获取事件的触发者。
event.type;  事件类型
event.target;  获取事件触发者dom对象
event.data;  事件调用时传入额外参数。
event.relatedTarget;  对于鼠标事件,标示触发事件时离开或者进入的dom元素.
event.currentTarget;  等同于this
event.pageX/Y;  鼠标事件中相对于页面原点的水平/垂直坐标.
event.result;  上一个事件处理函数返回的值.
event.timeStamp;  事件发生时的时间戳.

事件对象的函数
event.preventDefault();
event.isDefaultPrevented();
event.stopPropagation();
event.isPropagationStopped();
event.stopImmediatePropagation();
event.isImmediatePropagation();

----------130616----------

11. jQuery AJax
$(function(){
   $("#btnAjaxJquery").click(function(event){
 $("#divResult").load("data/AjaxGetCityInfo.aspx",{"resultType":"html"})  //使用jquery的load方法只需要一句话。完成ajax请求。
   });
})

load(url,[data],[callback]);
默认使用Get方式，如果传递了data参数则使用Post方式。

回调函数
function(responseText,textStatus,XMLHttpRequest){  }

注意: 1.当使用Get方式时要添加时间戳参数(&timestamp=(new Date()).getTime())来保证每次发送的url不同,可以避免浏览器缓存.
      2.url参数后面添加了空格,会出现无法识别符号的错误.删除空格后问题解决.

jquery.get(url,[data],[callback],[type])    //type参数是指data数据的类型,xml,html,script,json,jsonp,text
默认为html

回调函数的签名
function(data,textStatus){
  //data could be xmlDoc,jsonObj,html,text,etc...
  this; //the options for this ajax request
}

jquery.getJSON(url,[data],[callback])方法相当于jquery.get(url,[data],[callback],"json");

jquery.getScript(url,[callback]);
实质上工作原理: 
var head = docuemt.getElementByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;
head.appendChild(script);

jquery.post(url,[data],[callback],[type]);
具体用法和get相同,只是提交方式由get改成post

jquery.ajax(options);

ajax默认的全局的option选项
$.ajaxSetup({
  url : "../url",
  data : {"param" : "ziqiu.zhang"},
  global : false,   ---默认为true,表示触发全局的ajax事件.
  type : "POST",
  success : function(data,textStatus){$("#divResult").html(data);}
});

//不传递参数调用
$("#btnAjax").click(function(event){$.ajax(); });
$("#btnGet").click(function(event){$.get(); });
$("#btnPost").click(function(event){$.post(); });
$("#btnGet2").click(function(event){$.get("../url",{"param" : "other"}); });

serialize()函数.
说明: serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串,便于我们使用ajax发送
时获取表单数据,这和一个form按照get方式提交时,自动将表单对象的名/值放到url上提交差不多.

全局的ajax事件.
ajaxStart(callback);
ajaxSend(callback);
ajaxSuccess(callback);
ajaxComplete(callback);
ajaxStop(callback);
ajaxError(callback);

回调函数的签名
function(evt,request,settings){  }
我们可以通过将默认options的global属性设置为false来取消全局ajax事件的触发.

注意事项: 如果在get请求发送的url中有两个同名参数，比如两个param参数，此时服务器端获取到得param是一个用逗号分隔多个值的字符串。

----------------------class7----------------------

12. jQuery动画特效
基本动画函数 basics
show();
show(speed,[callback]);
hide();
hide(speed,[callback]);
toggle(); //切换元素的可见状态，如果是可见切换为隐藏，如果是隐藏切换为可见。
toggle(switch); true为可见，false为隐藏。
toggle(speed,[callback]);

滑动动画效果 sliding
slideDown(speed,[callback]);   //就是show的滑动效果版本
slideUp(speed,[callback]);     //就是hide的滑动效果版本
slideToggle(speed,[callback]); //slideToggle就是slideToggle滑动效果版本

淡入淡出函数 fading
fadeIn(speed,[callback]);
fadeOut(speed,[callback]);
fadeTo(speed,opacity,[callback]);
透明度渐变没有切换函数。

##自定义动画## 高级应用。

全局控制属性
jquery.fx.off = true; //关闭所有动画，当把这个属性设成false之后，可以重新开启所有动画。

----------------------class8----------------------
13. 基本完整页面代码结构
<html>
<head>
  <!-- 引入jquery文件 -->
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
    //必须放在头部加载的语句块，尽量避免使用。
  </script>
</head>
<body>
  ...

<script type="text/javascript">
    //用户自定义方法 userDefindMethod

//事件绑定
    $(function(){
      $("#btnShow").bind("click", userDefindMethod);
      ...
    });

//加载时执行的语句
    $(function(){
      $("#btnShow").attr("value","被修改后的显示按钮")
    });
  </script>

</body>
</html>

--说明--
1.在页面底部添加<script>区域，两个function分别放置"事件绑定"和"加载时执行"的语句，即使在加载时执行的javascript也必须要保证dom加载完毕后执行，
所以两个function都被嵌套在$()中保证在dom加载完毕后调用。
2.应尽量避免在头部加载脚本，必须在头部加载的可以在页面head中添加一个script区域。
3."自定义函数"要放在"事件绑定"和"加载时执行"语句块之上，并且不需要包含在$()中。

----------------------class9----------------------
14. jquery工具函数为我们操作对象和数组提供了便利条件。

浏览器及特性检测
jquery.support

数组和对象操作
1.迭代
jquery.each(object,callback);

/全部到图片对象
   $("img").each(function(index){
   // alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt +  ",src:" + this.src);
    this.alt = "change";
   // alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt + ",src:" + this.src);
   });
--c4-demo.html-- index参数表示当前访问对象的索引。

$(function(){
     //数组
      $.each(["a","b","c"],function(index,value){
       alert("index: " + index + " , value: " + value);
       alert(this);   //表示当前遍历的元素。
       if(index >= 1){
        return false;
       }
      });
      //对象（遍历的是对象的属性）
      $.each({name:"simpledev",sex:"male",status:"best"},function(index,value){
       alert("index: " + index + " , value: " + value);
       alert(this);   //表示当前属性的值。
       if(index >= 1){
        return false;  //与数组的区别：依然会遍历完全部的属性。
       }
      });
    });

2.筛选
jquery.grep(array,callback,[invert])

var arr = $.grep([0,1,2],function(index,value){
       return index > 0; //返回索引值大于0的数组对象。
      });
      alert(arr); //返回结果为1,2

3.转换
jquery.map(array,callback)
和each函数已经几乎相同，唯一区别就是回调函数可以改变当前元素。返回null则删除当前元素。

function(value,index){  //参数列表与each,grep相反。
 
}

4.合并
jQuery.extend([deep],target,object1,[objectN]);
jQuery.makeArray(obj);
jQuery.inArray(value,array); 从0开始计数，如果没有找到则返回-1
jQuery.merge(first,second);
jQuery.unique(array);  删除重复数组，只处理dom元素数组，而不能处理字符串或数字数组。

另外不能因为有了jquery就忘记我们的原始javascript，比merge更常用的其实是join和split函数。

重点：jQuery.extend

测试工具函数
jQuery.isArray(obj)
jQuery.isFunction(obj)
isNaN: 判断参数是否是非数字，如果是数字则返回false
isFinite: 检查其参数是否是无穷大。

字符串操作工具函数
jQuery.trim(str); 目前核心库中只有一个字符串工具函数。
去掉字符串起始和结尾的空格。

url操作工具函数
jQuery.param(obj);

//自定义方法
      jQuery.myExtendMethod = function(o){
        alert("1111myExtendMethod");
        return "33333333333333";
      };
      //调用自定义函数
      alert("222" + $.myExtendMethod());

----------130616----------

15. jQuery高级应用
jquery UI
弹出层，tabs，手风琴菜单的应用实例。

----------------------class11----------------------
表单验证插件
自动完成插件