分享11

Jquery 01

2019/12/2 9:06:19

---

介绍

Jquery是一个快速简单的JavaScript框架, 是一个JavaScript的代码库.

使用步骤

1.  下载Jquery.js
        https://cdn.bootcss.com/jquery/3.4.1/jquery.js
        https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js

2. 编写script标签, 将下载的js引入到HTML中
   <script src="js/jquery.js"></script>

或者, 使用如下的cdn 进行引入文件:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

onload *

格式:
    $(函数);// 传入的函数, 在网页加载完毕时执行.

Jquery对象

Jquery 将网页中的元素 封装为了Jquery对象.
我们可以使用Jquery对象, 更简单的完成原JS的dom操作.

Jquery对象与Dom对象的关系, 可以简单的理解为: Jquery对象 是 DOM对象的集合.

DOM对象转换为Jquery对象

格式: var $obj = $(dom对象);

Jquery对象转换为DOM对象

格式: var dom对象 = $obj.get(下标);

查找Jquery对象

Jquery中查找元素对象 使用了CSS的选择器技术. 

选择器使用格式

var $obj = $("选择器");

基本选择器 ****

1.  id选择器
        var $obj = $("#id");
2.  class选择器
        var $obj = $(".class值");
3.  元素名称选择器 
        var $obj = $("元素名称");

筛选选择器 *

-   根据下标筛选:
        var $obj = $("选择器:eq(下标)");
-   根据内容筛选
        var $obj = $("选择器:contains('包含的文字')");
-   排除筛选选择器
        var $obj = $("选择器1:not(选择器2)");
-   可见筛选选择器
        var $obj = $("选择器:visible");
-   隐藏筛选选择器
        var $obj = $("选择器:hidden");
-   表单筛选选择器 (根据input标签的type属性进行筛选)
        var $obj = $("选择器:type值");
-   属性筛选选择器
        筛选存在属性:     var $obj = $("选择器[属性名]");
        筛选属性值等于某值:  var $obj = $("选择器[属性名='值']");
        筛选属性值不等于某值: var $obj = $("选择器[属性名!='值']");

显示隐藏函数 熟悉

-   基本显示隐藏函数
        -   显示: $obj.show();
        -   隐藏: $obj.hide();
        -   切换: $obj.toggle();

• 左上折叠淡入淡出隐藏函数
  - 显示: $obj.show(毫秒);
  - 隐藏: $obj.hide(毫秒);
  - 切换: $obj.toggle(毫秒);

• 上下折叠显示隐藏函数(作用于图片时, 需要指定固定的宽度.)
  - 显示: $obj.slideDown(毫秒);
  - 隐藏: $obj.slideUp(毫秒);
  - 切换: $obj.slideToggle(毫秒);

• 淡入淡出函数
  - 淡入: $obj.fadeIn(毫秒);
  - 淡出: $obj.fadeOut(毫秒);
  

修改属性函数

普通属性的修改: *

回顾JS:
    属性赋值:   元素对象.属性名 = 值;
    属性取值:   元素对象.属性名;

Jquery中使用attr函数 操作属性.
格式1:
用于一次操作单个属性:
属性赋值: $obj.attr("属性名","属性值");
属性取值: $obj.attr("属性名");

格式2.
    用于一次操作多个属性
    属性赋值:   $obj.attr(对象);

    例如给所有的img设置图片地址以及title属性:
        $("img").attr({"src":"images/1.jpg","title":"这是一张图片"});

特殊属性的修改 *

1.  class属性
        格式:
            -   添加Class
                    $obj.addClass("值");
            -   删除Class
                    $obj.removeClass("值");
            -   替换Class (值不存在则添加, 值存在则删除)
                    $obj.toggleClass("值");

2. innerHTML属性:
   格式1:
   使用html函数操作元素的内容:
   设置内容:
   $obj.html("内容");
   获取内容:
   var 变量 = $obj.html();

   格式1:
       使用text函数操作元素的内容:
       设置内容:
           $obj.text("内容");
       获取内容:
           var 变量 = $obj.text();
   

3. value属性 :
   使用attr函数 获取输入框的value属性值, 得到的都是初始值.
   随着用户的输入, 通过attr获取的值不会改变.
   原因是: Jquery对象不是我们在查找时.创建的,其实是在网页加载完毕时就创建完毕了. 我们使用选择器查找, 只是取出使用.

   为了处理这个问题, Jquery提供了val函数, 用于操作输入框的内容.
   
   获取值:
       $input.val();
   设置值:
       $input.val("值");
   

常见面试题 *****

Jquery中 text函数 和 html函数的区别:
    两个函数都是用于获取与设置元素的内容.
    区别是:
        html函数在获取内容时, 会获取到html标签内容.
        text函数在获取内容时, 会忽略html标签内容
例如如下div的获取:
    <div>锄禾<b>日</b>当午</div>
    html函数: 锄禾<b>日</b>当午
    text函数: 锄禾日当午

样式函数 熟悉

作用: 用于修改元素的style属性值

格式1. 一次操作单个样式的值:
$obj.css("样式名","样式值");

格式2. 一次操作一组样式的值:
$obj.css(对象);

案例:
<script>
var width = 200;
function x1(){
width = width*1.1;
$("img").css("width",width+"px");
}

    $(function(){
        $("img").css({
            "border":"2px solid red",
            "box-shadow":"0px 0px 3px 3px #999"
        });
    });

</script>

动画函数 了解

格式:
    $obj.animate(style,time,[function]);
参数的含义:
    参数1.    目标样式.  是一个对象, 描述的是动画执行完毕的样式.
    参数2.    从当前样式 到 目标样式的所需时长.
    参数3.    可选参数, 当动画执行完毕后, 执行的事件监听函数.

案例:
<style type="text/css">
div{
position: absolute;
top:300px;
left:-200px;
}
span{
display: inline-block;
transition:transform 999s;
transform: rotate(0deg);
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("div").animate({
"left":"600px"
},2000,x1);
});
function x1(){
$("div").animate({
"font-size":"80px",
"left":"200px"
},1000,x2);

            $("span").attr("style","transform:rotate(1000000deg)");
        }
        function x2(){
            $("div").animate({
                "font-size":"16px",
                "left":"600px"
            },1000,x3);
        }
        function x3(){
            $("div").animate({
                "font-size":"80px",
                "left":"200px"
            },1000,x2);
        }
    </script>
    <title></title>
</head>
<body>
    <div>
        <span>锄</span>
        <span>禾</span>
        <span>日</span>
        <span>当</span>
        <span>午</span>
        <span>,</span>
        <span>汗</span>
        <span>滴</span>
        <span>禾</span>
        <span>下</span>
        <span>土</span>
        </div>
</body>

事件 *

JS事件使 视图代码html 与 逻辑代码js 混合, 不利于后期的扩展和维护.
使用Jquery的事件指定方式, 可以很好的对JS和HTML进行分离. 更利于后期代码的扩展.

事件的绑定 与 解绑 掌握

格式:
    -   绑定事件 , 一个元素可以绑定多个同类事件.
            $obj.bind("事件类型",函数);
    -   解绑事件 , 一次解绑同类的所有事件
            $obj.unbind("事件类型");

例如:
$("button.class1").bind("click",x1);
$("button.class1").bind("click",x2);
$("button.class1").bind("click",x2);

下述的按钮, 点击时,就会执行x1和两次x2函数
<button class="class1"></button>

事件函数 *

格式:
    $obj.事件类型(函数);

例如: 给id为but1 的元素添加点击事件
$("#but1").click(x1);

模拟触发事件函数

$obj.事件类型();

setInterval(function(){
$("button:eq(0)").click();
},10);

组合事件函数 hover

格式:
    $obj.hover(in,out);
    参数1.    鼠标移入时 执行的函数
    参数2.    鼠标移出时 执行的函数

案例:

<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery.js"></script>
        <style type="text/css">
            img{
                width:200px;
            }
        </style>
        <title></title>
    </head>
    <body>
        <img src="images/27.jpg" /><img src="images/28.jpg" /><img src="images/29.jpg" /><img src="images/30.jpg" />
        <script type="text/javascript">
            var imgpath1 = ["images/27.jpg","images/28.jpg","images/29.jpg","images/30.jpg"];
            var imgpath2 = ["images/27.gif","images/28.gif","images/29.gif","images/30.gif"];

            $("img").hover(function(){
                var src = $(this).attr("src");
                var index = 0 ;
                switch(src){
                    case imgpath1[0]:
                        index = 0;
                    break;
                    case imgpath1[1]:
                        index = 1;
                    break;
                    case imgpath1[2]:
                        index = 2;
                    break;
                    case imgpath1[3]:
                        index = 3;
                    break;
                }
                $("img:eq(" +index+ ")").attr("src",imgpath2[index]);
            },function(){
                var src = $(this).attr("src");
                var index = 0 ;
                switch(src){
                    case imgpath2[0]:
                        index = 0;
                    break;
                    case imgpath2[1]:
                        index = 1;
                    break;
                    case imgpath2[2]:
                        index = 2;
                    break;
                    case imgpath2[3]:
                        index = 3;
                    break;
                }
                $("img:eq(" +index+ ")").attr("src",imgpath1[index]);
            });
        </script>
    </body>
</html>

事件类型指的是?

例如:     onclick 的事件类型是: click
        onblur  的事件类型是: blur
        ...