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'));
            });
        });