2017-04-06 jQuery 学习笔记

作者: GodlinE | 来源:发表于2017-04-07 09:48 被阅读0次

2017-04-06 jQuery 学习笔记
JQuery零基础语法速学
Struts2学习笔记(核心组件详解)
【转】JQuery全面总结
跟我一起学jQuery——第一集
JQuery学习笔记
JQuery学习笔记
jquery学习笔记
jQuery学习笔记
JQuery学习笔记

jQuery 简介&集成

过去 js 中存在的一些问题
获取某个 DOM 对象，根据不同的类型，使用不同的函数才能获取
代码的容错性比较差，如果一旦出现错误，下买呢的代码压根没法执行
如果批量的操作 DOM 对象，必须手动的遍历操作
有可能会左很懂兼容性的代码
实现一个小功能，往往需要写很多代码才可以实现，比如一个动画效果
如果向操作一个对象的多个属性，要写很多遍前缀
jQuery 代码

$('.test2').click(function(){
        //隐式迭代
        //链式调用
        $('div').show(1000).html('哈哈哈');
})
alert('xxxx');

jQuery 的代码风格
$('.cl')获取标签，其中使用类名获取标签就用.cl，使用 id 获取标签就用#cl，与 CSS 格式相同

$('.cl').click(function(){
        $('.box').hide();
});
$(function(){
        alert('xxx');
})

jQuery 加载模式对比

函数，执行时机：整个文档加载完毕（ DOM 树，图片资源，外链资源）且只执行一次，后面执行的函数，会把前面的赋值、覆盖。
jQuery 不会有这样的问题

window.onload = function(){
        alert('xxx');
}
window.onload = function(){
        alert('ooo');
}

//文档 DOM 树加载完毕之后执行
$(document).ready(function(){
        alert('xxxx');
})
$(document).ready(function(){
        alert('oooo');
})
$(function(){})

jQuery 解决冲突 noConflict

<script src=""></script>
<script src=""></script>
//后者会覆盖前者
//如果后者是 jQuery 函数库
//在使用完 jQuery 之后需解除绑定
$.noConflict();    //解除 $ 符号的使用绑定
// $ 实际上就是 jQuery

//如果前者是 jQuery 函数库，$ 被后者覆盖
//使用即时函数来进行操作
(function($){
        $('.box').hide();
        $('.box').hide();
        $('.box').hide();
})(jQuery)

jQuery 对象与 js 对象的相互转换

jQuery 对象的命名规范是在对象前加 $ 符号
var $div = $('.box');
因为 jQuery 将 js 对象抓取封装是在一个伪数组中，所以 jQuery 对象向 js 对象转换在 jQuery 对象之后加角标即可,转换之后就可以使用
js DOM 对象方法$div[0].innerHTML,$div.get(0).innerTEXT
js 对象转换成 jQuery 对象只需要用 $() 包裹即可$(div).html('xxx');

jQuery 操作 CSS 添加&删除&切换类

$(function(){
        $('.on').click(funciton(){
                $('div').addClass('current');
        });
        $('#off').click(function(){
                $('div').removeClass('current');
        });
        $('#auto').click(function(){
                $('div').toggleClass('current');
        })
})

jQuery 操作 css-css()

$(function(){
        $('#get').click(function(){
                var $div = $('.box');
                var w = $div.css('width');
                var h = $div.css('height'); 
                var bg =$div.css('background');
                alert('--'+ w + '--' + h + '--' + bg )   
        })
        $('#set').click(function(){
                var $div = $('.box');
                //键值对的方式设置样式
                $div.css({
                       'width':'500px',
                       'height':'500px',
                       'background':'red',
                 })
        })
})

链式调用

  function Person(name) {
                    this.name = name;
                }
             
                Person.prototype.eat = function () {
                    console.log('吃饭');
                    return this;
                };
                Person.prototype.shuijiao = function () {
                    console.log('睡觉');
                    return this;
                };
                Person.prototype.qiaodaima = function () {
                    console.log('敲代码');
                    return this;
                };

                var p = new Person('sz');
                p.eat().shuijiao().eat().eat().eat();

jQuery 操作css -尺寸

  $(function () {
                var w = $("#small").width()
                var h = $("#small").height()
                var iw = $("#small").innerWidth()
                var ih = $("#small").innerHeight()
                var ow = $("#small").outerWidth()
                var oh = $("#small").outerHeight()
                var owm = $("#small").outerWidth(true)
                var ohm = $("#small").outerHeight(true)
                var array = [w, h, iw, ih, ow, oh, owm, ohm]
                alert(array)
            });

jQuery 操作 html - 获取&设置

$(function () {

//                    set();
//                    var div = document.getElementsByName('xx')
//                    $(div).get(0)

//                    console.log($('a').attr('target'));

//                    $('a').attr('href', 'http://www.baidu.com').attr('target', '_blank');
                    $('a').attr({
                        'href': 'http://www.baidu.com',
                        'target': '_blank'
                    })


                })

                function set() {
                    var $div = $('.box');
//                    console.log($div.text('<p>12345</p>'));
//                    $div.html('<p>12345</p>')

//                    var html = $div.html();

//                    $('input[type="text"]').val('321');

//                    $div.text($div.text() + '12345')

                    $div.text(function (index, oldValue) {
                        console.log(index + oldValue);
                        return oldValue + '11111';
                    })




//                    function exec(fun) {
//                        fun(1, 2, 3);
//                    }
//
//                    exec(function (a, b, c) {
//                        alert(a + '' + b + c);
//                    })


                }


                function get() {
                    // text
                    var $div = $('.box');
                    var text = $div.text();
                    var html = $div.html();
                    console.log(html);

                    var value = $('input[type="text"]').val();
                    console.log(value);
                }

jQuery 选择器


            // ready函数
            $(function () {

//                baseSelector()
//                cengjiSelector()
//                propertySelector()
                filterSelector()
            });


            function filterSelector() {
                $("#filter").parent().css("background-color", "blue")
            }

            function propertySelector() {
                $("a[href*=520]").text("你被换了")

            }


            function cengjiSelector() {
//                $("#ul1 li").css("background-color", "red")
//                $("#ul1>li").css("background-color", "red")
//                $("#ul1+div").css("background-color", "red")
                  // ==
//                  $("#ul1").next("div").css("background-color", "red")
//                $("#ul1~div").css("background-color", "red")
                  // ==
                  $("#ul1").nextAll("div").css("background-color", "red")
            }

            function baseSelector() {
                $("#id").css("background-color", "red")
                // 注意, jQuery对象执行某个方法, 会遍历jQuery对象, DOM数组中的每个对象执行这个方法
                // 但是可以通过索引进行获取 eq(index)
                $(".class").eq(0).css("background-color", "green")
                $("p").css("background-color", "yellow")
            }
    
        </script>
</head>
<body>


<!--基本选择器-->
<div id="id">id选择器内容</div>
<div class="class">class选择器内容1</div>
<div class="class">class选择器内容1</div>
<p>元素选择器内容1</p>
<p>元素选择器内容2</p>


<!--层级选择器-->
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <ul id="ul2">
        <li>11</li>
        <li>22</li>
    </ul>

</ul>
<div>div1</div>
<div>div2</div>

<p id="x">hehe</p>

<!--属性选择器-->
<a href="http://www.520it.com">小码哥</a>
<a href="http://www.baidu.com">小码哥2</a>

<!--筛选选择器-->


<div>
    <p id="filter">hehe</p>
</div>

jQuery 选择器演示

           <script>
                $(function () {

//                    $('ul>li:gt(0):not(:last)').css('background', 'red');

                    $('ul>li').click(function () {
//                        alert('xxx');
                        // d点击谁,谁背景 red 其他统统 green
                        console.log(this);

                        $(this).css('background', 'red').siblings().css('background', 'green');

                    })


                })

            </script>
</head>
<body>


<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
    <li>li7</li>
    <li>li8</li>
    <li>li9</li>
    <li>li10</li>
</ul>

jQuery 鼠标移入，移出事件

               $(function () {

//                    $('.big').mouseenter(function () {
//                        console.log('big鼠标移入');
//                    });
//
//                    $('.big').mouseleave(function () {
//                        console.log('big鼠标移出');
//                    });

//                    $('.big').mouseover(function () {
//                        console.log('big鼠标移入');
//                    });
//
//                    $('.big').mouseout(function () {
//                        console.log('big鼠标移出');
//                    });


                    $('.big').hover(function () {
                        console.log('big鼠标移入');
                    }, function () {
                        console.log('big鼠标移出');
                    });

//                    $('.big').mouseenter(function () {
//                        console.log('big鼠标移入');
//                    })


                })

            </script>

jQuery 元素的角标

       <script>
                $(function () {
                    // 移入和移除
                    $('li').hover(function () {
                        console.log($(this).index());
                    })
                })

            </script>
</head>
<body>

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
    <li>li7</li>
    <li>li8</li>
    <li>li9</li>
    <li>li10</li>
</ul>

实现 tab 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-jQuery实现tab标签-(界面搭建)</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 500px;
            height: 400px;
            margin: 100px auto;
        }

        .nav {
            border: 2px solid gray;
            border-bottom: none;
            overflow: hidden;
            width: 400px;
            height: 40px;
            background: white;
            position: relative;

            top: 2px;
        }

        .nav>ul>li {
            float: left;
            margin: 10px;
        }

        .images {
            width: 500px;
            height: 300px;
            border: 1px solid gray;
            position: relative;
        }

        .images img {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .current {
            color: gold;
            font-size: 19px;
        }


    </style>

        <script src="../jquery-3.1.1/jquery-3.1.1.js"></script>
            <script>
                $(function () {

                    // 移入移出先后顺序问题?
                    // get set无法分清问题?
                    // attr css方法使用区分问题?

//                    attr('value', '123');
//                    css('left', 'none')
//                    val(123);
//                    html()
//                    input type = 'radio'
                        // div.style.display

                    $('.images>img:not(:first)').css('display', 'none');

                    $('.nav>ul>li').hover(function () {
                        var currentIndex = $(this).index();
                        $('.images>img').eq(currentIndex).css('display', 'block').siblings().css('display', 'none');

                        // 添加class
                        $(this).addClass('current').siblings().removeClass('current');


                    })


                })

            </script>

</head>
<body>

<div class="box">
    <div class="nav">
        <ul>
            <li class="current">H5学院</li>
            <li>iOS学院</li>
            <li>JAVA学院</li>
            <li>UI学院</li>
        </ul>

    </div>

    <div class="images">
        ![](tabImage/01.png)
        ![](tabImage/02.png)
        ![](tabImage/03.png)
        ![](tabImage/04.png)
    </div>


</div>


</body>
</html>

实现淘宝商品展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-淘宝商品展示-(UI界面搭建)</title>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 400px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid goldenrod;
        }

        .left,.right {
            width: 100px;
            height: 300px;
            float: left;
        }
        .center {
            width: 200px;
            height: 300px;
            float: left;
            position: relative;
        }

        li {
            width: 100px;
            height: 34px;
            border-bottom: 1px dashed red;
            box-sizing: border-box;
        }

        .center img {
            width: 200px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }

        li:hover {
            background: green;
        }



    </style>

        <script src="../jquery-3.1.1/jquery-3.1.1.js"></script>
            <script>
                $(function () {

                    // 刚进来之后, 把所有的图片都隐藏, 仅仅只显示第一个
                    $('img').eq(0).css('display', 'block').siblings().css('display', 'none');


//                    $('li').eq(9).css('background', 'red');

                    // 1. 监听所有li< hover
                    $('.left>ul>li').hover(function () {
                        // 2. 根据当前li对应的索引,来控制中间图片的展示
                        // 当前的控件, 在父控件上的位置索引
                        var index = $(this).index();

                        // [] == get == dom对象
                        // eq
                        $('.center>img').eq(index).css('display', 'block').siblings().css('display', 'none');

                        console.log(index);
                    });

                    $('.right>ul>li').hover(function () {
                        // 2. 根据当前li对应的索引,来控制中间图片的展示

                        var index = $(this).index() + 9;
                        $('.center>img').eq(index).css('display', 'block').siblings().css('display', 'none');
                        console.log(index);
                    })



                })

            </script>


</head>
<body>

<div class="box">
    <div class="left">
        <ul>
            <li>登山鞋</li>
            <li>冬裙</li>
            <li>毛衣</li>
            <li>棉服</li>
            <li>男包</li>
            <li>男毛衣</li>
            <li>男棉服</li>
            <li>男靴</li>
            <li>呢大衣</li>
        </ul>
    </div>

    <div class="center">
        ![](taobaoImg/登山鞋.jpg)
        ![](taobaoImg/冬裙.jpg)
        ![](taobaoImg/毛衣.jpg)
        ![](taobaoImg/棉服.jpg)
        ![](taobaoImg/男包.jpg)
        ![](taobaoImg/男毛衣.jpg)
        ![](taobaoImg/男棉服.jpg)
        ![](taobaoImg/男靴.jpg)
        ![](taobaoImg/呢大衣.jpg)
        ![](taobaoImg/牛仔裤.jpg)
        ![](taobaoImg/女包.jpg)
        ![](taobaoImg/女裤.jpg)
        ![](taobaoImg/女靴.jpg)
        ![](taobaoImg/皮带.jpg)
        ![](taobaoImg/皮衣.jpg)
        ![](taobaoImg/围巾.jpg)
        ![](taobaoImg/雪地靴.jpg)
        ![](taobaoImg/羽绒服.jpg)
    </div>

    <div class="right">
        <ul>
            <li>牛仔裤</li>
            <li>女包</li>
            <li>女裤</li>
            <li>女靴</li>
            <li>皮带</li>
            <li>皮衣</li>
            <li>围巾</li>
            <li>雪地靴</li>
            <li>羽绒服</li>
        </ul>

    </div>

</div>


</body>
</html>

2017-04-06 jQuery 学习笔记
jQuery 简介&集成过去 js 中存在的一些问题获取某个 DOM 对象，根据不同的类型，使用不同的函数才能...
JQuery零基础语法速学
JQuery学习笔记 1.认识JQuery 简介 JQuery是一个JavaScript库，语法简洁，有跨平台的兼...
Struts2学习笔记(核心组件详解)
[toc] Struts2学习笔记(核心组件详解) @(_1每日记录) 返回到JQuery学习笔记@达内lang笔...
【转】JQuery全面总结
1、jquery学习总结（超级详细）转自脚本之家hebedich的投稿 2、jQuery笔记总结篇转自Poet...
跟我一起学jQuery——第一集
《锋利的JQuery》第二版阅读笔记-第一章 jQuery对象和DOM对象想学习jQuery，首先要学会区分jQ...
JQuery学习笔记
JQuery是一个js语言的框架，作用是简化js代码 JQuery优势简化js代码可以向css一样通过选择器查...
JQuery学习笔记
写在前面2018-9-11 00：35很久没有学习新知识了，最近几天的毕业季，校招社招面试题真的带给我很大的冲击。...
jquery学习笔记
前言暑假的时候虽然说学习过一遍jQuery了，但只是眼过一遍，熟悉了基本的使用并没有做记录，趁着学校这两天学校运...
jQuery学习笔记
1.通过CDN(内容分发网络)引用jQueryBaidu CDN: 2.jQuery 语法$(selecto...
JQuery学习笔记
JQuery基础语法基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（s...