jquey可以帮我们干这些事情:
1.消除浏览器的差异,不需要自己写冗长的代码来针对不同的浏览器绑定事件。
2.简洁的dom操作. $("#test”)方法
3.轻松实现动画,修改css等各种操作。
jquery的版本 2.x移除了对古老的IE6 7 8的支持。因此2.x更加的精简。
按ID查找,按tag查找。按class查找.
// 查找<div id="abc">:
var div = $('#abc');
返回的对象都是jquery对象。
什么是jquery的对象,jquery对象类似数组,他的每个元素都是一个引用了dom节点的对象。
如果id为abc的div不存在,返回的对象如下[]
总之jquery的选择器不会返回undefined或者null,不必进行判断。
按tag进行查找.
var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点
按class查找。
var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
按属性进行查找 比如找出name = 'email'的
var email = $('[name=email]'); // 找出<??? name="email">
jquery层级的选择器 因为DOM的结构是层级的结构,所以我们经常要根据层级关系来进行查找。可以进行过滤的相关查找。
var b = $("ul.lang li.lang-javascript");
console.log(b);
这种层级选择器的好处便是缩小了选择的范围,首先定义父选择器,再是子选择器,避免页面其他无关的元素。
子选择器可以用箭头的方式来表明,必须是父子的关系才能使用。
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系
过滤器 可以用firstchild或者nth-child(even)来表示选择出的是哪个节点。
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
2操作DOM 修改text和html
获取text和html等内容。
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'
可以通过text进行修改 text('曹凯强')这种进行修改。
修改css的相关属性。
$("#ckq").css('background-color','red');
div.css('color') 可以获取对应的属性值,('color':'red')这种操作可以修改对应的css属性值。
显示和隐藏DOM可以用提供的hide和show属性使用。
$("#ckq").show();
增加DOM结可以利用append的方法。
var newP = '<p>陈盼盼</p>';
$("#ckq").append(newP);
删除对应的节点,可以用remove的方法。
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除
jquery中的一些事件处理。
因为js在浏览器中是以单线程模式运行的。页面加载后,一旦页面上所有的js代码都被执行完毕,只能依靠触发事件来执行js代码。
如下所示 获取超链接的jquery对象 随后为该对象添加click事件。
获取对象后加上对应的click事件即可。
a.on('click',function(){
alert("hello");
})
鼠标事件
click: 鼠标单击时触发;
dblclick:鼠标双击时触发;
mouseenter:鼠标进入时触发;
mouseleave:鼠标移出时触发;
mousemove:鼠标在DOM内部移动时触发;
hover:鼠标进入和退出时触发两个函数,
相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是<input>
和<textarea>
。
keydown:键盘按下时触发;
keyup:键盘松开时触发;
keypress:按一次键后触发。
其他事件
focus:当DOM获得焦点时触发;
blur:当DOM失去焦点时触发;
change:当<input>
、<select>
或<textarea>
的内容改变时触发;
submit:当<form>
提交时触发;
ready:当页面被载入并且DOM树完成初始化后触发
其中,需要记住的是,ready仅作用于document对象,由于ready事件在DOM完成初始化后触发,且只触发一次,所以非常适合来写其他初始化的代码。
$(document).on('ready', function () {
alert("ready");
})
ready函数还可以进行简化。
$(function () {
}
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
事件可以进行传递参数,比如获取mousemove和keypress所需的参数。
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消绑定 注意这里必须显示定义的函数,按照匿名函数的话无法进行移除。
function hello(){
alert("hello");
}
a.on('click',hello);
var cpp = $("#cpp");
cpp.click(function(){
a.off('click',hello);
})