HTML之jQuery

入门

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            onload  = function(){
                $('#btnShow').attr('href', 'http://www.baidu.com');
            }
        </script>
    </head>
    <body>
        <a id="btnShow">超链接</a>
        <img src="1470107537.png" />
    </body>
</html>

属性操作

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            function fun(){
                alert($('#btnShow').attr('value'));//取属性
                $('#btnShow').removeAttr('value');//移除属性
                location = "http://www.baidu.com";//重定位
            }
            onload  = function(){
                $('#btnShow').attr('onclick', 'fun()');//添加属性
            }
        </script>
    </head>
    <body>
        <input type="button" id="btnShow" value="按钮" />
        <img src="1470107537.png" />
    </body>
</html>

事件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        //为window的onload事件注册处理函数，表示“页面加载完成”后触发执行
        onload = function () {
            alert('JS方式加载完成');//排在最后
        };
        //jQuery方式:DOM就绪，表示“标签”加载完成后执行此代码
        $(document).ready(function () {
            alert('jQuery方式加载完成');
        });
        $(function () {
            // alert('简写方式');
            //$('#btnShow').onclick = function () {
            //不可多播事件
            //};
            $('#btnShow').click(function () {
                alert('牛逼');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示" />
</body>
</html>

合成事件

            //合成事件
            $('#btnShow').hover(function () {//光标指向
                this.style.color = 'red';
            }, function(){//光标移开
                this.style.color = 'blue';
            });

            $('#btnShow').toggle(function () {//第一次点击后
                alert(1);
            }, function () {//第二次点击后
                alert(2);
            }, function () {//第三次点击后
                alert(3);
            });

            $('#btnShow').one('click', function () {
                //执行一次便失效点击事件
            });

省市联动

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            var datas = {
                "北京" : ["朝阳", "海淀", "昌平", "丰台"],
                "山东" : ["青岛", "济南", "烟台"],
                "山西" : ["大同", "太远", "运城", "长治"],
                "河南" : ["洛阳", "开封", "郑州", "驻马店"],
                "河北" : ["石家庄", "张家口", "保定"]
            };
            $(function(){
              var select = $('<select id="selectProvince"></select>');
              select.change(function(){
                //找到市信息
                var citys = datas[$(this).val()];
                $('#selectCity').empty();
                $.each(citys, function(index, item){
                $('<option value="'+item+'">'+item+'</option>').appendTo($('#selectCity'));
                });
              });
              select.appendTo('body');
              //jQuery遍历
              $.each(datas, function(key, value){
                $('<option value="'+key+'">'+key+'</option>').appendTo(select);
              });
              var selectCity = $('<select id="selectCity"></select>').appendTo('body');
              var pro = $('#selectProvince').val();
              var citys = datas[pro];
              $.each(citys, function(index, item){
                $('<option value="'+item+'">'+item+'</option>').appendTo(selectCity);
              });
            });
        </script>
    </head>
    <body>
       
    </body>
</html>

样式

              //设置样式
              $('#but').css('background-color', 'red');
              $('#but').css({
                            'color' : 'blue',
                            'font-size' : '20px'
              });
            });

链式语法测试

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('li').hover(function () {//移上
                $(this).css('background-color', 'red')
                .prevAll()//找到当前节点之前的所有节点，破坏了链式结构
                .css('background-color', 'orange')
                .end()//恢复最近一次链的破坏
                .nextAll()
                .css('background-color', 'blue');
            }, function () {//移开
                $(this).css('background-color', 'white')
                .siblings().css('background-color', 'white');//获取左右的兄弟节点
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

总结