$与jq的说明
$就是jquery 的缩写
例子：$(‘img’).attr(‘src’)=JQuery(‘img’).attr(‘src’)
Jsonload和jquery中ready 的说明
Window.onload 必须在页面所有dom元素（包含：音频，图片，视频文件等）加载完成之后再执行onload内的代码 时间较长
适用于：页面元素较少的情况下
Jquery.ready:是页面上所有dom元素加载完毕以后，就执行ready中的代码
关于css的操作
Addclass（class）：为选定的元素加载样式
Removeclass（class）：为选定的元素移除样式
Toggleclass（class）：当选定元素还未加载样式，那么就执行加载样式的操作；如果选定元素已将加载了该样式 ，那么就移除该样式的操作
复制节点
Clone（）克隆方法 通过clone 可以对节点进行复制。如果clone（）方法里面没有参数的话，只复制该节点，并不赋值节点下的方法。
Clone（true）：通过设置clone（）方法中的参数为true，达到同时复制节点和节点下方的目的
Multiple 让下拉框变成复选框
事件对象
$(‘#mybuton’).on(‘click’,function(e){
$(e.target)
})
Document.getelementById(‘mubut’).onclick=function(e){
E||window.event
}
添加dom节点的另一种方式
$(添加的元素).clone().appendto(目标位置)
例如
$(‘aa’).append($(‘cc’).clone())
$(‘cc’).clone().appendto($(‘aa’))
:selected
选取下拉列表中选中的元素
：hidden
选取页面上隐藏的元素
$(‘div:hidden’).text
过滤器支持连用
$(‘div:hidden:eq(0)’).text()
事件对象的常用属性
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.
jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:
$(‘#testDiv’).bind(‘click’, function(event) { });
关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event
jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).
| 属性名称 | 描述举例 |
|---|---|
| type | 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.$(‘a’).click(function(event) { alert(event.type); }); |
| target | 获取事件触发者DOM对象$(‘a[href=http://google.com]').click(function(event) { alert(event.target.href); }); |
| data | 事件调用时传入额外参数.$(‘a’).each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); }); |
| relatedTarget | 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素$(‘a’).mouseout(function(event) { alert(event.relatedTarget); }); |
| currentTarget | 冒泡前的当前触发事件的DOM对象, 等同于this.$(‘p’).click(function(event) { alert( event.currentTarget.nodeName ); });结果:P |
| pageX/Y | 鼠标事件中, 事件相对于页面原点的水平/垂直坐标.$(‘a’).click(function(event) { alert(‘Current mouse position: ‘ + event.pageX + ‘, ‘ + event.pageY ); }); |
| result | 上一个事件处理函数返回的值$(‘p’).click(function(event) { return ‘hey’ }); $(‘p’).click(function(event) { alert( event.result ); });结果:’hey’ |
| timeStamp | 事件发生时的时间戳.var last; $(‘p’).click(function(event) { if( last ) alert( ‘time since last event ‘ + event.timeStamp - last ); last = event.timeStamp; }); |
上面是jQuery官方文档中提供的event对象的属性. 还有一些属性没有来得及验证, 大家可以帮忙验证是否在所有浏览器下可用:
| 属性名称 | 描述 |
|---|---|
| altKey | Alt键是否被按下. 按下返回true |
| ctrlKey | ctrl键是否被按下, 按下返回true |
| metaKey | Meta键是否被按下, 按下返回true. |
| meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键 | |
| shiftKey | Shift键是否被按下, 按下返回true |
| keyCode | 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠. |
| which | 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右). |
| screenX/Y | 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标 |
Jq工具函数
定义在jq对象上 jq对象是全局 定义在之上的方法也是全局的 这些方法称之为工具函数utilities函数
主要用来操作数组，字符串 对象
调用方法
$.trim()或者jquery.Trim（）
针对字符串的而操作
$.trim（）//去掉字符串两端的空格
有针对数组的操作
$.isArray()
$.merge(arr1，arr2)//合并数组
…..
//如果涉及到对数组的操作， 可以找jq的数组工具函数
测试操作
$.isArray(myArray)//判断是否是数组
$.isFunction()//判断是否是函数
判断浏览器的名称与版本信息
工具函数详细（含使用例子）
①** 获取浏览器的名称与版本信息**
在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。
例如，调用$.browser对象，获取浏览器名称并显示在页面中，如下图所示：
②检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。
例如，根据页面的特征，并通过$.support.boxModel属性的返回值，显示当前浏览器是否属于标准的w3c盒子模型，如下图所示：
③检测对象是否为空
在jQuery中，可以调用名为$.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：
$.isEmptyObject(obj);
其中，参数obj表示需要检测的对象名称。
例如，通过$.isEmptyObject()函数，检测某个指定的对象是否为空，并将结果显示在页面中，如下图所示：
④检测对象是否为原始对象
调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：
$.isPlainObject (obj);
其中，参数obj表示需要检测的对象名称。
例如，通过$.isPlainObject()函数，检测某个指定的对象是否为原始，并将结果显示在页面中，如下图所示：
⑤检测两个节点的包含关系
调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：
$.contains (container, contained);
参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。
例如，通过$.contains()函数，检测两个节点对象间是否存在包含关系，并将检测的结果显示在页面中，如下图所示：
⑥字符串操作函数
调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：
$.trim (str);
参数str表示需要删除左右两边空格符的字符串。
例如，通过$.trim()函数，除掉一个两边均有空格符的字符串，并将其执行前后的字符长度都显示在页面中，如下图所示：
⑦URL操作函数
调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：
$. param (obj);
参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。
例如，通过$.param()函数，对指定的对象进行序列化编码，使其成为可执行传值的URL地址，并将该地址显示在页面中，如下图所示：
序列化后：
备注：上一篇博文提到的$.serialize方法与这个方法有什么区别呢？$.param方法是对任意的参数进行URL地址格式的转换，而$.serialize方法仅属于form提交的数据转换。
⑧使用$.extend()扩展工具函数
调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：
$. extend ({options});
参数options表示自定义插件的函数内容。
例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中，如下图所示：
⑨使用$.extend()扩展Object对象
除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：
$. extend (obj1,obj2,…objN);
参数obj1至objN表示需要合并的各个原有对象。
例如，调用$.extend()函数对两个已有的对象进行合并，并将合并后的新对象元素内容显示在页面中，如下图所示：
结果：
从图中可以看出，当两个对象通过$.extend()函数扩展合并后，返回一个包含两个对象中全部属性元素的新对象，相同名称的’name’属性，前者被后者覆盖。
注：
function isIE(){
return navigator.appName.indexOf(‘Microsoft Internet Explorer’)!=-1 && document.all;
}
function isIE6() {
return navigator.userAgent.split(‘;’)[1].toLowerCase().indexOf(‘msie 6.0’)==’-1’?false:true;
}
function isIE7(){
return navigator.userAgent.split(‘;’)[1].toLowerCase().indexOf(‘msie 7.0’)==’-1’?false:true;
}
function isIE8(){
return navigator.userAgent.split(‘;’)[1].toLowerCase().indexOf(‘msie 8.0’)==’-1’?false:true;
}
function isNN(){
return navigator.userAgent.indexOf(‘Netscape’)!=-1;
}
function isOpera(){
return navigator.appName.indexOf(‘Opera’)!=-1;
}
function isFF(){
return navigator.userAgent.indexOf(‘Firefox’)!=-1;
}
function isChrome(){
return navigator.userAgent.indexOf(‘Chrome’) > -1;
}
第三方插件的使用：