JQuery笔记（一）

1.体验JQurey

/*
* 1. 查找元素的方法多种多样，非常灵活
* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动画非常简单，而且功能更加的强大。
* 5. 代码简单、粗暴。
* */
//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

2.jq对象和dom对象转换(重要)

DOM对象转换成jQuery对象

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象

var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

3.jquery选择器

基本选择器

$(“#id”); $(“.class”); $(“div”);

跟css的选择器用法一模一样。

过滤选择器

$('div").css(‘属性;值’)

名称	用法	描述
:eq(index)	$(“li:eq(2)”).css(“color”, “red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, “red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, “red”);	获取到的li元素中，选择索引号为偶数的元素

案例一：新浪下拉菜单

    <script>
        $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        });
    </script>

案例二：淘宝精品展示栏

<script>
        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                $("#content div").eq(index).siblings().hide();
                // 结构二(链式编程)
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>

4.元素设置

样式设置

    /*1.设置一个样式*/
    //两个参数  设置的样式属性,具体样式
    $('li').css('color','red');
    //传入对象（设置的样式属性:具体样式）
    $('li').css({'color':'red'});
    /*2.设置多个样式*/
    $('li').css({
        'color':'green',
        'font-size':'20px'
    });

类名设置

    /*1.添加一个类*/
    $('li').addClass('now');
    /*2.删除一个类*/
    $('li').removeClass('now');
    /*3.切换一个类  有就删除没有就添加*/
    $('li').toggleClass('now');
    /*4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
    $('li').hasClass('now');

属性设置

    /*1.获取属性*/
    $('li').attr('name');
    /*2.设置属性*/
    $('li').attr('name','tom');
    /*3.设置多个属性*/
    $('li').attr({
        'name':'tom',
        'age':'18'
    });
    /*4.删除属性*/
    $('li').removeAttr('name');

prop方法

    /*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/
    $("#checkbox").prop("checked");
    $("#checkbox").prop("checked", true);
    $("#checkbox").prop("checked", false);
    $("#checkbox").removeProp("checked");

5.动画效果

显示隐藏

    /*注意：动画的本质是改变容器的大小和透明度*/
    /*注意：如果不传参数是看不到动画*/
    /*注意：可传入特殊的字符  fast normal slow*/
    /*注意：可传入数字 单位毫秒*/
    /*1.展示动画*/
    $('li').show();
    /*2.隐藏动画*/
    $('li').hide();
    /*3.切换展示和隐藏*/
    $('li').toggle();

滑入滑出

    /*注意：动画的本质是改变容器的高度*/
    /*1.滑入动画*/
    $('li').slideDown();
    /*2.滑出动画*/
    $('li').slideUp();
    /*3.切换滑入滑出*/
    $('li').slideToggle();

淡入淡出

    /*注意：动画的本质是改变容器的透明度*/
    /*1.淡入动画*/
    $('li').fadeIn();
    /*2.淡出动画*/
    $('li').fadeOut();
    /*3.切换淡入淡出*/
    $('li').fadeToggle();
    $('li').fadeTo('speed','opacity');

自定义动画

animate(params , [ speed] , [easing] , [fn])

    /*
    * 自定义动画
    * 参数1：需要做动画的属性
    * 参数2：需要执行动画的总时长
    * 参数3：执行动画的时候的速度
    * 参数4：执行动画完成之后的回调函数
    * */
    $('#box1').animate({left:800},5000);
    $('#box2').animate({left:800},5000,'linear');
    $('#box3').animate({left:800},5000,'swing',function () {
        console.log('动画执行完成');
    });

6.jQuery特殊属性操作

each方法

    // 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素（DOM对象）
    $(selector).each(function(index,element){});

使用案例：

    $(function() {
        // $("div").css("color", "red");
        // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，是比for强大）
        var sum = 0;
        // 1. each() 方法遍历元素 
        var arr = ["red", "green", "blue"];
        $("div").each(function(i, domEle) {
            // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
            // console.log(index);
            // console.log(i);
            // 回调函数第二个参数一定是 dom元素对象 也是自己命名
            // console.log(domEle);
            // domEle.css("color"); dom对象没有css方法
            $(domEle).css("color", arr[i]);
            sum += parseInt($(domEle).text());
        })
        console.log(sum);
        // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
        // $.each($("div"), function(i, ele) {
        //     console.log(i);
        //     console.log(ele);
        // });
        // $.each(arr, function(i, ele) {
        //     console.log(i);
        //     console.log(ele);
        // })
        $.each({
            name: "andy",
            age: 18
        }, function(i, ele) {
            console.log(i); // 输出的是 name age 属性名
            console.log(ele); // 输出的是 andy  18 属性值
        })
    })

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

    //设置值
    $("#name").val('张三');
    //获取值
    $("#name").val();

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

    //设置内容
    $('div').html('<span>这是一段内容</span>');
    //获取内容
    $('div').html()
    
    //设置内容
    $('div').text('<span>这是一段内容</span>');
    //获取内容
    $('div').text()

width方法与height方法

设置或者获取高度

    //带参数表示设置高度
    $('img').height(200);
    //不带参数获取高度
    $('img').height();

获取网页的可视区宽高

    //获取可视区宽度
    $(window).width();
    //获取可视区高度
    $(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

    //获取页面被卷曲的高度
    $(window).scrollTop();
    //获取页面被卷曲的宽度
    $(window).scrollLeft();

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

    //获取元素距离document的位置,返回值为对象：{left:100, top:100}
    $(selector).offset();
    //获取相对于其最近的有定位的父元素的位置。
    $(selector).position();