jquery的使用

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 &amp; 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);

  
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章