JQuery学习笔记
| 1、失去焦点事件onblur |
| 2、选择器 |
| 3、属性操作 |
| 4、事件 |
| 5、加载完成 |
| 6、合成事件 |
| 7、调用js的成员 |
| 8、text(),html() |
| 9、动态添加删除元素 |
| 10、遍历集合以及change事件 |
| 11、设置样式 |
| 12、函数 |
| 13、权限选择 |
1、失去焦点事件onblur
//为文本框注册失去焦点事件，失去焦点时，进行密码验证 document.getElementById('txtPwd').onblur = function () {。。。。}
2、选择器
//根据id查找
$('#btnShow');
//根据元素查找
$('input');
//空格表示查找所有子级
$('#d1 div');
//过滤选择器
$('div:first');
3、属性操作
//获取属性的值：只写第一个参数，属性的名字 //alert($('#btnShow').attr('value')); //设置属性的值：写两个参数，第一个表示属性的名字，第二个表示值 //$('#btnShow').attr('value', 'Hello World'); //prop表示html的原有属性，attr而表示扩展属性 //如：img的src操作使用prop，而href操作使用attr //一般使用attr因为各种情况都适用 //$('img').attr('href', 'abc'); //移除属性 //$('#btnShow').removeAttr('value');
4、事件
//为按钮绑定点击事件 //$('#btnShow').click(function() { // alert(this.value);//this是dom对象，不能调用jquery的成员 //}); //dom的事件注册:一个事件只能注册一个处理函数，不支持多播 //document.getElementById('btnShow').onclick = function() { // alert(1); //}; //document.getElementById('btnShow').onclick += function() { // alert(2); //}; //jquery事件注册：支持多播，一个事件可以指定多个处理函数 $('#btnShow').click(function() { alert(1); }); $('#btnShow').click(function() { alert(2); });
5、加载完成
//为window的onload事件注册处理函数，表示页面加载完成后触发执行 //标签加载完成，并且标签指定的资源也加载完成 //onload = function() { //}; //表示加载完成后执行此代码:dom就绪，指标签加载完成，这时，标签指定的资源可能还没有加载完成 //$(document).ready(fun);简写如下： $(function() { $('#btnShow').click(function() { alert(1); }); });
6、合成事件
//合成指向、移开事件 //$('#btnShow').hover(function() {//指向 // this.style.color = 'red'; //}, function() {//移开 // this.style.color = 'black'; //}); //合成点击事件,指定在n个函数间切换，点击次数为m //$('#btnShow').toggle(function() {//第m%n==1次点击时执行此函数 // alert(1); //}, function() {//第m%n==2次点击执行此函数 // alert(2); //}, function() {//第m%n==0次点击执行此函数 // alert(3); //}); //合成事件：只将绑定的事件执行一次 //$('#btnShow').one('click', function() { // alert(1); //});
7、调用js的成员
//找到按钮，并绑定点击事件 $('#btnShow').click(function() { //找到文本框并获取值 var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作 num++; //将值显示到文本框 $('#txtNum').val(num);//传递参数时，表示将值赋给value }); });
8、text()、html()
$(function() { $('#btnShow').click(function () { //对于标签对，使用text()、html()进行设置或获取 $('#txt1').text('这是个div'); }); });
9、动态添加删除元素
$('#btnAppend').click(function () {
//动态创建jquery对象
var zhh = $('<b>Zhh</b>');
//追加
$('#divContainer').append(zhh);
});
$('#btnAppendTo').click(function () {
//追加到
$('<b>拍电影</b>').appendTo($('#divContainer'));
});
$('#btnEmpty').click(function () {
//清空所有子元素
$('#divContainer').empty();
});
$('#btnRemove').click(function() {
//$('#divContainer').remove();
$('<span style="color:red">sadkfjlsad</span>').insertBefore('#divContainer');
});
});
10、遍历集合以及change事件
//$.each(obj,fun(i,n)) //如果obj是数组，则i是索引，n是元素 //如果obj是对象或键值对，i是键，n是值 //定义省市数据，键值对集合 var datas = { "北京": ["朝阳", "海淀", "昌平", "丰台"], "山东": ["青岛", "济南", "烟台"], "山西": ["大同", "太原", "运城", "长治"], "河南": ["洛阳", "开封", "郑州", "驻马店"], "河北": ["石家庄", "张家口", "保定"] }; $(function() { //创建省的select var select = $('<select id="selectProvince"></select>'); //最后写change事件：为省的select绑定change事件 select.change(function () { //找到市信息 var citys = datas[$(this).val()]; //删除市的原有option $('#selectCity').empty(); //添加option $.each(citys, function(index,item) { $('<option>' + item + '</option>').appendTo('#selectCity'); }); }); //追加到body中 select.appendTo('body'); //遍历集合 $.each(datas, function (key, value) { //根据数据创建option并追加到select上 $('<option value="' + key + '">' + key + '</option>').appendTo(select); }); //创建市的select var selectCity = $('<select id="selectCity"></select>').appendTo('body'); //获取选中的省信息 var pro = $('#selectProvince').val(); //将省名称作为键到集合中获取值 var citys = datas[pro]; //遍历市的数组 $.each(citys, function(index, item) { $('<option>' + item + '</option>').appendTo(selectCity); }); });
11、设置样式
//设置样式 //$('#btnShow').css('background-color', 'red'); //设置多个样式 $('#btnShow').css({ 'color': 'white', 'background-color': 'blue', 'font-size': '20px' });
12、函数
//call与apply的意义：在不改变对象源代码的情况下，可以让函数内部的this表示当前对象 var id = 10;//为window对象定义了属性id function showId() { alert(this.id); } function Person(fn) { this.id = 20;//为类定义了属性id //this.sayId2 = fn; } //var p1 = new Person(); //p1.sayId = showId;//将方法showId赋值给变量sayId //p1.sayId();//调用方法,使用p1调用的方法，所以函数中的this就是p1 //var p2 = new Person(showId); //p2.sayId2(); //在不改变原有成员的情况下，让person对象调用showId方法 //showId(); showId.call(new Person());//call表示由哪个对象来调用这个方法，方法中的this就是这个对象
13、权限选择
$(function () { //为“全部右移”按钮绑定事件 $('#btnRightAll').click(function () { //获取所有子元素,追加到右边的select中 $('#selectLeft').children().appendTo('#selectRight'); }); //为“选中右移”按钮绑定事件 $('#btnRight').click(function () { //获取到所有被选中的option $('#selectLeft :selected').appendTo('#selectRight'); }); //为“全部左移”按钮绑定事件 $('#btnLeftAll').click(function() { //获取右侧所有的option $('#selectLeft').append($('#selectRight option')); }); //为“选中左移”按钮绑定事件 $('#btnLeft').click(function() { //获取右侧选中的项，加到左边 $('#selectLeft').append($('#selectRight :selected')); }); });
