阶段三模块二 jQuery

内容输出来源：拉钩教育Java就业训练营

1 jQuery

1.1 jQuery能做什么

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

使用jQuery能大幅提高开发效率

1.2 jQuery优势

• 体积小，压缩后只有100KB左右
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性

2 jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突

在页面中使用传统引入js文件的方式引入即可。

<script src="js/jquery-3.4.1.min.js"></script>

2.1 基本语法

<script>
	$(selector).action();
</script>

• 工厂函数 $() ：将DOM对象转化为jQuery对象

• 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ）

• 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

2.3 选择器

2.3.1 基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器	element.class或element#id	匹配指定class或id的某元素或元素集合	$(“h2.title”)选取所有拥有class为title的h2元素

<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
    
<script src="js/jquery-3.4.1.min.js"></script>
<script>
   //$("p").css("color","red"); // 标签选择器，获得所有的p
   //$(".jy").css("color","red"); //类选择器
   //$("#wan").css("color","red"); //ID选择器,更具备唯一性
   //$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
   $("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

2.3.2 层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻 元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取 元素之后所有的同辈元素

2.3.3属性选择器

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href =’#’]" )选取href属性值为“#”的元素
[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !=’#’]" )选取href属性值不为“#”的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$("[href$=’.jpg’]" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
[s1] [s2] [sN]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻]” )选取含有id和title属性为新闻的 元素

2.3.4 过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有 元素中的第一个 元素
:last	选取最后一个元素	$(" li:last" )选取所有 元素中的最后一个 元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有 元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有 元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的 元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1）

2.4 事件

2.4.1 鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    $("img").click( function(){
        //点击一下，换照片
        $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
    } );

    $("img").mouseover( function(){   //移动到元素上
        $(this).css( "border","2px solid red" );
    } );
    $("img").mouseout( function(){    //离开元素
        $(this).css( "border","2px solid white" );
    } );

</script>

2.4.2 键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时

2.4.3 表单事件

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

2.4.4 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

2.4.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
  $("h2").click(function(){
      $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
  });
</script>

2.4.6 事件的动态绑定

/*绑定单个事件*/
$(".del").on('click', function() {
	alert('hello');
})
/*绑定多个事件*/
$(".del").on('click mouseover', function() {
	alert('hello');
})

2.5 元素的隐藏和显示

2.5.1 改变元素的搞和宽

• show( speed )：显示
• hide( speed )：隐藏
• toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

2.5.2 改变元素的高

• slideDown( speed ) ：显示
• slideUp( speed )：隐藏
• slideToggle( speed )等价于slideDown+slideUp
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").slideUp(1000); //向上收缩
    });

    $("#btn1").click(function(){
        $("div").slideDown(1000); //向下伸展
    });

    $("#btn3").click(function(){
        $("div").slideToggle(1000); //切换
    });
</script>

2.5.3 不改变元素的大小（淡入淡出效果）

• fadeIn( speed ) 显示
• fadeOut( speed ) 隐藏
• fadeToggle( speed ) 等价于fadeIn+fadeOut动画
• fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").fadeOut(1000); // 隐藏：淡出我的视线
    });

    $("#btn1").click(function(){
        $("div").fadeIn(1000); // 显示：映入眼帘
    });

    $("#btn3").click(function(){
        $("div").fadeToggle(1000); // 切换
    });

    $("#btn4").click(function(){
        $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
    });
</script>

2.5.4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；

<script>
    $("button").click(function(){
        $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
    });
</script>

2.6 DOM和CSS的操作

2.6.1 属性函数

• attr( “属性” ); 获得元素的属性值

  • attr( “属性” , “新值” ); 修改元素的属性值
  • attr( 样式参数 ) ：样式参数可以写成json格式

• val() ; 获得表单元素中的value值

  • val(“x”) 修改表单元素中的value值

• html(); 获得元素中的内容（标签+文本）

  • html(“x”) 修改元素中的内容（标签+文本）

• text(); 获得元素中的文本

  • text(“x”) 修改元素中的文本

2.6.2 样式函数

• css( “属性”); 获得该属性值
• css( “属性”,“值”); 设置属性的值
• css( { json} ); 设置多个属性的值
• width(); 获得元素的宽度
• width( number ); 修改元素的宽度
• height(); 获得元素的高度
• height( number ); 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //var w = $("div").css("width"); // 获取css属性，width的值

            //1.一个键值对
            //$("div").css("background-color","pink");

            //2.链式编程
            //$("div").css("background-color","pink").css("border-radius","50%");

            //3.json为参数
            /*$("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            } );*/
            var w = $("div").width(); // （无参）获取宽度
            var h = $("div").height();// （无参）获取高度
            // alert("宽:"+w+"px，高:"+h+"px");
            $("div").width("300"); // （传参）修改宽度
            $("div").height("300"); //（传参）修改高度
        });
    </script>
</body>

2.6.3 类样式函数

• addClass(); 为元素添加类样式
• removeClass(); 将元素的类样式移除
• toggleClass(); 样式的切换（有->无，无->有）

2.6.4 节点操作

• 创建节点
  • 工厂函数$()用于获取或创建节点
• 插入节点
  • 插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中，如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中，如：$newNode1.appendTo(“ul”);
prepend(content)	$(A).prepend(B)表示将B前置插入到A中，如：$(“ul”). prepend ($newNode1);
prependTo(content)	$(A).prependTo(B)表示将A前置插入到B中，如：$newNode1. prependTo (“ul”);

插入同辈节点

语法	功能
after(content)	$(A).after(B)表示将B插入到A之后，如：$(“ul”).after($newNode1);
insertAfter(content)	$(A).insertAfter(B)表示将A插入到B之后，如：$newNode1.insertAfter(“ul”);
before(content)	$(A).before(B)表示将B插入至A之前，如：$(“ul”).before($newNode1);
insertBefore(content)	$(A).insertBefore(B)表示将A插入到B之前，如：$newNode1.insertBefore(“ul”);

• 替换节点
  • replaceWith()
  • replaceAll()
• 复制节点
  • clone()
• 删除节点
  • remove()删除整个节点
  • empty()清空节点内容

2.7 遍历节点

2.7.1 祖先元素

用于向上遍历 DOM 树的方法

• parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

2.7.2 同辈元素

• next() 获取紧邻匹配元素之后的元素
• prev() 获取紧邻匹配元素之前的元素
• siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<p>p2</p>
<p id="x">p3</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //祖先元素
    /*$("button").click(function(){
        //var x = $("b").parent().html(); // 找爸爸
        //var x = $("b").parents("ul").html(); // 找祖宗 ul
        //var x = $("b").parents("body").html(); // 找祖宗 body
        alert( x );
    });*/
    //同辈元素
    $("button").click(function(){
        //var x = $("ul").next().text(); // 紧邻的下一个元素
        //var x = $("ul").prev().text(); // 紧邻的上一个元素
        //var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的

        var arr = $("ul").siblings();  // ul的所有兄弟,1个button，3个p，2个script
        for(var i = 0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

2.7.3 后代元素

后代是子、孙、曾孙等等

• children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
       //var x =  $("ul").children().text(); //所有子节点：abc
       var x =  $("ul").children("li:first").text();  //ul中的第一个子节点
       alert(x);
    });
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龚工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
        //var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
        var x = $("ul").find().text(); // 找什么？不知道！
        alert(x);
    });
</script>

2.7.4 元素的过滤

• first()：过滤第一个元素
• last()：过滤最后一个元素
• eq(index)：过滤到下标为index的元素
• not()：除了什么之外的元素
• is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); // 第一个li
        //var x = $("li").last().text(); // 最后一个li
        //var x = $("li").eq(1).text(); // 下标为1的li
        //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
        var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul

        alert(x);
    });
</script>