H5学习06之jQuery的基本使用

本篇内容：

• 一，jQuery简介
• 二，实战

一，jQuery简介

1.通过选择器查找元素

• $('选择器')
• jQuery支持绝大部分的CSS选择器

2.属性操作

• 获得属性：$('选择器').attr('属性名');
• 设置属性：$('选择器').attr('属性名', '属性值');

3.显示和隐藏

• 显示：$('选择器').show();
• 隐藏：$('选择器').hide();
• 显示和隐藏来回切换：$('选择器').toggle();

4.事件绑定

• 点击事件(常用)
  $('选择器').click(function() {
  // 实现点击按钮想做的事情
  }).hide();
  // 先给节点绑定事件，再隐藏

• 点击事件(不常用)
  function login() {
  // 实现点击按钮想做的事情
  }
  $('选择器').click(login);

二，实战

主要做的效果如下图：

• jquery效果

代码如下：具体看注释哦

<script src="../jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

    /*
    //1，jquery的基本操作
    //原来的方法获取src，获取的是绝对路径
    var imImage = document.getElementById("zhang");
    alert(imImage.src);

    //jquery获取src，获取的是绝对路径
    var imImage01 = $("img");
    alert(imImage.src);
    //这种是没有简写的，这种写法是错误的哦
    //alert($("img").src);

    //jquery获取src，获取相对路径
    var imImage02 = $("img");
    alert(imImage02.attr("src"));
    //简写为
//   alert($("img").attr("src"));
    */

    //2，jquery可以同时进行多个操作，如同时把上面的图片改为另外一张图片，还可以指定进行更改
    function changeAllPics() {
        //jquery可以同时进行多个操作，如同时把上面的图片改为另外一张图片
        $("img").attr("src","src/images/img_02.jpg")
    }

    function changeAllPicsBack() {
        //jquery可以同时进行多个操作，如同时把上面的图片改为另外一张图片
        $("img").attr("src","src/images/img_01.jpg")
    }

    function changeSomePics() {
        $(".a").attr("src","src/images/img_04.jpg");
    }


    //3，jQuery还可以监听事件
    //注意：这里是click而不是onclick哦
    $("img").click(function () {
        alert("干嘛要点击我，我只是张图片！");
    })

//    $("*").click(function () {
//        alert("点击了一个标签，虽然我不知道是什么标签");
//    })

    //4, jquery的默认方法
    function showAllPics() {
        $("img").show();
    }
    function hideAllPics() {
        $("img").hide();
    }

    function toggle() {
        $("img").toggle(2000);
    }

    //5， 突然发现可以直接取出按钮进行点击监听
    $("#imBtn").click(function () {
//        $("img").slideDown(2000);
//        $("img").fadeIn(2000);
        $("img").fadeOut("slow");
    })
</script>