1、$(function(){})是什么
-----------------(1)-----------------
$(function() {
//...
});
-----------------(2)-----------------
$(document).ready(function(){
//...
});
-----------------(3)-----------------
window.onload = function() {
//...
}
说明：(1)就是(2)的简写形式，window.onload 只能出现一次，而(1)、(2)可以出现多个次，都是指当文档载入完毕后执行。如果该段js代码放到了dom文档的最后，可以不用写这几个方法。
注意：$(document).ready(function(){...})里面还可以定义多个函数。但是，外面的语句无法调用里面的函数；
2、常用的选择器
| 选择器 | 举例 | 说明 |
|---|---|---|
| #id | $("#lastname") | 选取id="lastname" 的元素 |
| .class | $(".intro") | 选取class="intro" 的所有元素 |
| element | $("p") | 选取所有<p> 元素 |
| :first | $("p:first") | 选取第一个<p> 元素 |
| :input | $(":input") | 选取所有 input 元素 |
实例
(1)获取value等于10的input元素：$("input[value=" + 10 + "]")
(2)获取id="hahaha"的直接父元素：$("#hahaha").parent
3、jQuery对象与DOM对象的相互转换
(1)jQuery通过选择器获取的对象并不是原生的DOM对象。
jQuery对象是包装DOM对象后产生的，是一个数据对象；jQuery无法使用DOM对象的任何方法，DOM对象也不能使用jQuery的任何方法。$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
(2)jQuery对象转成DOM对象：
$("#id") [0]：其中$("#id")是jQuery对象，$("#id") [0]是DOM对象，在后面加上[0]可以获取对应的DOM对象，或者使用$("#id").get(0)同样可以获取。
(3)DOM对象转成jQuery对象:
只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象，如：
var v = document.getElementById("id"); //DOM对象
var v1 = $(v); //jQuery对象
4、jQuery设置元素的属性等
假如有元素：<div id="haha"><input id="haha1" value="zhangSan"></div>
(1)设置某元素的高度：$("#haha").height("200px");
(2)设置某元素的样式：$("#haha").css("display", "none");
(3)获取浏览器窗口的高度：$(window).height()
(4)获取input元素的值：$("#haha1").val()
(5)设置input元素的值：$("#haha1").val("liSi")
(6)设置src、href等属性：
$('#img-id').attr("src","http://你的图片地址");
$('#a-id').attr("href","http://你的链接地址");
5、常用处理方法
(1)屏蔽html标签：$('<div/>').text("<h1>我是h1标签</h1>").html()
(2)显示文本内容：假如使用p标签<p id="text-viewer"></p>，然后设置为：$("#text-viewer").html("要显示的文本内容");
(3)text()、html() 、与val()的区别
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val()- 设置或返回表单字段的值
(4)获取某元素的scrollHeight值(实际高度，即使有由于滚动而不接见的部分)：
$("#id").prop('scrollHeight')
引自：Stack Overflow
---------------------------------
There is no scrollHeight in jQuery - it's scrollTop():
var elemHeight = $("#container").scrollTop();
var scrollHeight = $("#scrollbars").scrollTop();
Alternatively if you want to use the native scrollHeight property,
you need to access the DOM element in the jQuery object directly, like this:
var elemHeight = $("#container")[0].scrollHeight;
var scrollHeight = $("#scrollbars")[0].scrollHeight;
------------------------------------
If you are using Jquery 1.6 or above, use prop to access the value.
$("#container").prop('scrollHeight')
Previous versions used to get the value from attr but not post 1.6.
6、jQuery常用事件
| 事件 | 说明 | 举例 |
|---|---|---|
| click() | 点击元素时 | $("p").click(function(){ //...}); |
| dblclick() | 双击元素时 | $("p").dblclick(function(){//...}); |
| mouseenter() | 鼠标指针穿过元素时 | $("#p1").mouseenter(function(){//...}); |
| hover() | 光标悬停在元素时 | $("#p1").hover(function(){//...}); |
| mousedown() | 鼠标指针移动到元素上方，并按下鼠标按键时 | $("#p1").mousedown(function(){}); |
| mouseup() | 在元素上松开鼠标按钮时 | $("#p1").mouseup(function(){//... }); |
| focus() | 元素获得焦点时 | $("input").focus(function(){//...}); |
| blur() | 当元素失去焦点时 | $("input").blur(function(){/...}); |
另外两个：
bind()：向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
unbind()：从被选元素上移除添加的事件处理程序。
常用处理方法：
禁用右键：
$("#container").bind("contextmenu",function(e){
return false;
});
禁止选择文字：这里，选择器可以是某个元素，但是如果写成某个元素，依然可以从其他元素元素文字，然后拉动鼠标，选中你禁止选择文字的元素，所以最好用document。
//适用IE和Chrome
$(document).bind("selectstart",function(){return false;});
//适用Firefox:注意这里不能写document，否则会无效
$(document.body).css("-moz-user-select", "none");
监听窗口大小改变
$(window).resize( function(){
//调整视频view的容器的高度
$("#vedio-viewer").height($("#vedio-viewer").width()*2/3);
});
为input标签绑定enter事件
$("#input-id").keypress(function(e) {
var key = window.event ? e.keyCode : e.which;
if (key.toString() == "13") {//enter键
//执行一些操作
...
...
//防止事件继续传递
return false;
}
});
点击某一元素外的区域的事件
$(document).not($("#nav-search-input")).click(function(){
//点击除nav-search-input之外的其他区域触发的事件
});
//但是要加上这个，防止事件继续传递
$("#nav-search-input").click(function(event) {
event.stopPropagation();
//操作...
});
禁止输入特殊字符
$("#input-id").on('input',function(e){
var search = $("#input-id").val();
$("#input-id").val(search.replace(/\#/g, ''));
});
7、jQuery循环遍历
$(".hahaha").each(function(){//对所有class中含有hahaha的元素进行循环操作
//这里可以用this表示当前遍历的jQuery对象
});
8、其他
(1)判断字符串是否以特定字符串结尾
String.prototype.endWith=function(endStr){
var d=this.length-endStr.length;
return (d>=0&&this.lastIndexOf(endStr)==d)
}
function(name){
name = name.toLowerCase();
if(name.endWith(".docx") ){
//...
...
}
}
9、ajax
$.ajax({
cache : false,//布尔值，表示浏览器是否缓存被请求页面。默认是 true。
type : "POST",//规定请求的类型（GET 或 POST）。
url:"请求的url路径",//规定发送请求的 URL。默认是当前页面。
data :... ,//规定要发送到服务器的数据。
//这里要说明的是，data有三种形式：
文本形式 data : "uname=alice&mobileIpt=110",(也可以在url后面直接拼接)
json对象 data : {uanme:'vic',mobileIpt:'110'},
json数组 data : [
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
],
//如果是表单数据，可以这样写：
data : $('#表单的id').serialize(),
async : false,//布尔值，表示请求是否异步处理。默认是 true。
error : function(request) {//如果请求失败要运行的函数。
//...
...
},
success : function(data) {//当请求成功时运行的函数。
//假如获取的数据类型是Map，如何取值？
//后台Map map = new HashMap(); map.put("name", "zhangsan");
可以这样来处理：data = eval("(" + data + ")");
那么data.name就是字符串"zhangsan"
//如何获取map的长度
var length = Object.keys(data).length ;
...
}
});
10、jQuery对各种数据的处理
待续
11、关于浏览器
(1)获取浏览器的flash有没有安装以及版本
//使用示例
var flash = flashChecker();
if(!flash.f){
//安装了flash插件
console.log("flash的版本是：" + flash.v);
}else{
//没安装flash插件
$("#vedio-viewer").html("<p style='margin-top:20px;'>
您的浏览器没有安装flash插件，需安装后才能播放视频：
</p><a href='http://get.adobe.com/cn/flashplayer/'>点击安装</a>");
}
//函数定义
function flashChecker(){
var hasFlash = 0; // 是否安装了flash
var flashVersion = 0; // flash版本
if (document.all) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return {f:hasFlash,v:flashVersion};
}
