什么是jQuery?
就是一个JavaScript函数库,开源的。
jQuery能做什么
JavaScript是做什么的,jQuery就是做什么的,Jquery是对javascript的封装。
JQuery的特点
1、 写少做多——Write Less,Do More
2、 很好的解决了不同浏览器的兼容问题(css还是有问题的)
3、 对于不同控件具有统一的操作方式
4、 体积小,使用简单方便
5、 链式编程、隐式迭代、插件丰富、开源、免费
6、 让编写JavaScript程序更简单,更强大)
优点:
1、 轻量级
2、 强大的选择器
3、 出色的DOM操作的封装
4、 可靠的事件处理机制
5、 完善的Ajax
6、 不污染顶级变量
7、 出色的浏览器兼容性
8、 链式操作方式
9、 隐式迭代
10、 行为层与结构层的分离
11、 丰富的插件支持
12、 完善的文档
13、 开源
jQuery中的顶级对象$
$是jQuery的简写,可以用jQuery代替$
window.onload(fn)和$(document).ready(fn)的区别:
window.onload(fn) | $(document).ready(fn) |
页面完全加载完毕后才会触发 | 只要Dom元素加载完毕就触发,提高相应速度 |
每次注册新的事件都会将前面的覆盖掉 | 可以多次注册事件,最终都会执行 |
使用jQuery实现window.onload的效果:$(window).load(fn);
jQuery中提供的两个循环函数
1 $.map(array,callback(element,index));对于数组array中的每个元素,调用回调函数,返回一个新的数组,原数组不变 2 element:当前循环的数组元素 3 Index:当前下标 4 $.each(array,fn) 5 遍历数组,return false退出循环 6 使用this表示当前元素的值7
$.trim(字符串) 去掉两端的空格
jQuery对象和Dom对象的转换
Dom对象转换为jQuery对象:$(Dom对象)
jQuery对象转换为Dom对象:$(Dom对象).get(0);$(Dom对象)[0];
jQuery选择器
Id选择器:$('#id');
标签选择器:$('input'); $('*')获取页面上的所有元素
属性过滤选择器:$('input[name=gender]')
类样式选择器:$('.cls');
标签+类选择器:$('div.cls');
多条件选择器:$('p,div,span.menuitem')//同时选择p标签、div标签和拥有menuitem样式的span标签元素
层次选择器:$('div li')//div下的所有li元素(所有)
$('div>li')//div下直接li子元素
$('.menuitem+div')//样式为menuitem之后的相邻的第一个div元素 = $('.menuitem').next('div')
$('.menuitem~div')//样式为menuitem之后的所有的兄弟div元素 = $('.menuitem').nextAll('div')
基本过滤选择器::first选取第一个元素 $('div:first')
:last选取最后一个元素 $('div:last')
:not选取不满足选择器条件的元素 $('input:not(.cls)')
:even选取索引是偶数
:odd选取索引是奇数
$(':header')选取所有的h1——h6元素
$('div:animated')选取正在执行动画的<div>元素
属性过滤选择器:$('div[id]')//选取有id属性的div
$('div[title=test]')//title属性等于test
$('div[title!=test]')//title属性不等于test或没有title属性
$('input[name^=n]')//name属性以n开头
$('input[name$=n]')//name属性以n结尾
$('input[name*=n]')//name属性包括n
表单对象属性过滤器:$('#form1:enabled')//选取id为form1的表单内所有启用的元素
$("#form1 :disabled")//选取id为form1的表单内所有禁用的元素
$("input:checked”)//选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select :selected")选取所有选中的选项元素
表单选择器:$(':input')//选取所有的input、textarea、select、button
$(':text')//与$('input[type=text]')差不多,但有一定的区别
$('textarea')//错误
可见性过滤器::hidden
内容过滤器::contains(text)//包含指定文本的元素
:empty//不包含元素或者文本的元素
:has(input)//包含指定元素的元素
:parent//作为父元素的元素
子元素过滤器: $('ul li:first');//只返回一个li元素
$('ul li:first-child’);//为每个父元素ul都返回一个li
:only-child,匹配当前父元素中只有一个子元素的元素
:nth-child(3n),选取3的倍数的元素
:nth-child(3n+1),满足3的倍数+1的元素
.children()方法,只考虑子元素,不考虑后代元素
链式编程
注意:$('div').html('值').val('值')可以
$('div').html().val('值')不可以
括号中没有值的时候是获取值,获取值返回的是获取的字符串而不是对象,所以不能链式编程
end()方法可以恢复链被破坏前的情况
toggleClass('cls')切换样式的显示
hasClass('cls')判断是否应用了某样式
$('p:eq(0)')代表的是第一个元素
$('p:lt(2)')前两个,索引为2之前的
$('p:gt(2)')表示的是后两个
获得兄弟元素的几个方法
next();//当前元素之后的紧邻着的第一个兄弟元素
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
jQuery的迭代(包装集)
if($('#btn').length<=0)
{
alert("id为btn的元素不存在!");
}
jQuery的Dom操作
$('a:first').html('hello');
$('a:first').text('hello');
$('a:first').attr('href','http://www.baidu.com');
$('a:first').removeAttr('class');删除属性
$('a:first').attr('class','');属性还有
动态创建Dom节点
$("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
$('body').append("<a href='http://www.baidu.com'>百度</a>");
prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)
(*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);
(*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);
empty()清空某元素下的所有子节点
remove()删除当前元素,返回值为被删除的元素
clone()克隆节点
$('br').replaceWith('<hr/>');用<hr/>替换br
$('<br/>').replaceAll('hr');用<br/>元素替换所有的hr