Jquery1

Jquery1里面是单引号
当前应用非常广泛的一个js类库，封装了大量方法，可以快速完成常用功能
在使用前需要先引入jquery.js文件，才可以使用这个库中的成员
$对象是jquery对象的简写方式，一般都使用$而不书写jquery，简便快捷

基本选择器
用于获取页面上的标签，返回一个jq对象
id选择器：#id
元素选择器：标签
类选择器：.class

属性
用于对标签元素的属性进行操作
获取属性值：attr(属性)
设置属性值：attr(属性，值)
如果是操作标签的值可以简写为：text()，html()
如果是操作控件的值可以简写为：val()

 <script>
        //操作属性
        //获取属性的值：只写第一个参数，属性的名字
        //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');
    </script>

 

合成事件处理程序
hover(fn1,fn2):fn1表示mouseover的处理函数，fn2表示mouseout的处理函数
toggle(fn1,fn2...fnN):当元素被click后，轮流执行fn1、fn2、fnN方法
one(type,fn)：表示注册的事件只响应一次，然后失效，type表示事件类型

 <script>
        //对于value属性的一种简写操作
    //$('#btnShow').attr('value');=>
        //$('#btnShow').val('');
        
        //为按钮绑定点击事件
        //$('#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);
        });
    </script>

加载事件

$(function() {
$('#btnShow').click(function() {
alert(1);
});

合成事件

 <script>
        $(function () {
            //合成指向、移开事件
            //$('#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);
            //});
        });
    </script>

 

 

如何使用JSz中的类型成员
直接使用，不需要任何转换，因为jq就是js
如：array是js对象，不需要进行jq转换
如：方法parseInt()是js中的方法，在jq编码时可以直接使用

 

 <script>
        $(function () {
            //找到按钮，并绑定点击事件
            $('#btnShow').click(function() {
                //找到文本框并获取值
                var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作
                num++;
                //将值显示到文本框
                $('#txtNum').val(num);//传递参数时，表示将值赋给value
            });
        });
    </script>

 

DOM和JQ对象的转换
为什么要转换呢？
为了使用jq中的方法，需要将dom对象转换成jq对象
jq并没有完成所有操作的封装，需要将jq对象转换成dom对象，再调用dom方法
dom->jq：$(dom对象名称)
jq->dom：jq对象.get(index)或jq对象[index]
对于dom对象，有属性、事件成员
对于jq对象，只有方法成员

 

文档处理
创建元素：$('标签字符串')
添加元素：
append()，追加

appendTo()：追加到子元素
prepend()，prependTo()：前加子元素
after()，insertAfter()：后加兄弟元素
before()，insertBefore()：前加兄弟元素
动态删除元素
empty()：清空子元素
remove(selector)：删除当前元素，无参表示删除全部，有参表示删除符合条件的元素

 

 <script>
        $(function() {
            $('#btnShow').click(function () {
                //对于标签对，使用text().html()进行设置或获取
                $('#txt1').text('这是个div');
            });
        });
    </script>

 

 <script>
        $(function() {
            $('#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');
            });
        });
    </script>

 

省市联动

 each在jqurery里面有两种使用,一种是遍历,另外一种是对对象的访问

<script>
        //$.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);
            });
        });
    </script>

 

层次选择器
符号一：空格，表示取子元素，无论是几层的子元素，都会被选择到
符号二：大于号>，表示直接子元素，不包含后代子元素
符号三：加号+，表示之后紧临的一个同级元素
符号三：波浪号~，表示之后的所有同级元素

next(),prev(),nextAll(),prevAll(),siblings(),parent(),children()

 

  <script>
        $(function () {
            //空格表示查找所有子级
            $('#d1 div');
        });
    </script>

 

操作样式和类
样式操作：css()，按照键值对的格式对样式进行设置
如果只设置一个样式，则可直接赋值，如：css('color','red');
如果设置多个样式，则使用css({键1：值1，键2：值2})的格式
操作后生成的代码，都是对标签的style属性进行设置

 

 <script>
        $(function () {
            //设置样式
            //$('#btnShow').css('background-color', 'red');
            //设置多个样式
            $('#btnShow').css({
                'color': 'white',
                'background-color': 'blue',
                'font-size': '20px'
            });
        });
    </script>

 <script>
        $(function() {
            $('#btnLight').click(function () {
                if (this.value == '关灯') {
                    $('body').css('background-color', 'black');
                    $(this).val('开灯');
                } else {
                    $('body').css('background-color', 'white');
                    $(this).val('关灯');
                }
            });
        });
    </script>

<script>
        $(function() {
            $('#btnChange').click(function () {
                //链式编号：只查找一次，支持逐个使用方法
                $('p').text('都是P').css('color','yellow');
            });
        });
    </script>

 

<script>
        $(function() {
            $('li').hover(function() {//指向的到焦点
                $(this).css({
                    'color': 'red',
                    'cursor':'pointer'//光标
                });
            }, function () {//移开
                $(this).css('color', 'black');
            }).click(function() {//链式编程，编写点击事件
                $(this).appendTo('#ul2');
            });
        });
    </script>

 

类操作：addClass,hasClass,removeClass,toggleClass
也可以使用属性方法进行操作：attr('class','className');

过滤选择器
用于对选择结果执行进一步过滤
:first、:last、:eq()、:gt()、:lt()、:not(选择器)、:even偶数、:odd奇数
说明1：索引下标从0开始
说明2：以下标判断奇偶，下标从0开始
标题的快速获取
普通方法：$('h1,h2,h3...h6')
快捷方法：$(':header')

<script>
        $(function() {
            $('div:first');
        });
    </script>

 表格操作知识点1.遍历 空格,奇偶,指向和移开 样式

<script>
        var list = [
    { id: '1', country: '中国', capital: '北京' },
    { id: '2', country: '美国', capital: '华盛顿' },
    { id: '3', country: '日本', capital: '东京' },
    { id: '4', country: '韩国', capital: '首尔' }
        ];

        $(function () {
            //遍历集合，创建tr与td
            $.each(list, function(index, item) {
                $('<tr><td>' + item.id + '</td><td>' + item.country + '</td><td>' + item.capital + '</td></tr>').appendTo('#list');
            });
            //为奇偶行指定不同背景色
            $('#list tr:even').css('background-color', 'red');
            $('#list tr:odd').css('background-color', 'green');
            //指定移上、移开效果
            $('#list tr').hover(function() {//移上
                bgColor = $(this).css('background-color');
                $(this).css('background-color', 'blue');
            }, function() {//移开
                $(this).css('background-color', bgColor);
            });
            //前三名变粗
            $('#list tr:lt(3)').css('font-weight', 'bold');
        });
    </script>

指向移开

<script>
        $(function () {
            $('li').hover(function () {//移上
                $(this).css('background-color', 'red')
                    .prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链
                    .css('background-color', 'yellow')
                    .end()//恢复最近的一次链的破坏
                .nextAll()
                .css('background-color', 'blue')
                ;
            }, function () {//移开
                $(this).css('background-color', 'white')
                    .siblings().css('background-color', 'white');//获取左右的兄弟节点
            });
        });
    </script>