JQuery入门及选择器

 JQuery概念

JQuery是一个快速的、简洁的JavaScript库。

JQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理，动画设计和Ajax交互。

JQuery本质：就是学习调用这些函数(方法)。

JQuery中的顶级对象$

1.$是JQuery的别称，在代码中可以使用JQuery代替，但一般为了方便，通常都直接使用$

2.$是JQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成JQuery对象，就可以调用JQuery的方法

JQuery的优点

1.轻量级

2.跨浏览器兼容，基本兼容了现在主流的浏览器

3.链式编程、隐式迭代

4.对事件、样式、动画支持、大大简化了DOM操作

5.支持插件扩展开发。有着丰富的第三方的插件。例如：树形菜单、日期控件、轮播图等

6.免费、开源

JQuery基础选择器

1.基本选择器

名称	用法	描述
ID选择器	$("#id")	获取指定id的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元名称名称

例如：

2.层级选择器

常用的两个分为后代选择

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意:并不会获取子孙层级的元素
后代选择器	$("ul  li")	使用空格，代表后代选择器，获取ul下的所有li元素，包括子孙等

3.属性选择器

属性选择器是制定DOM元素对应属性的一种选择器

名称	用法	描述
属性名称选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名='值'] []...")	包含多个属性条件的选择器

4.过滤选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

5.筛选方法（重点）

语法	用法	说明
parent（）	$("li").parent	查找父级
children(selector)	$("ul").children("li")	相当于$("ul>li"),最近1一级（亲儿子）
find（selector）	$("ul").find("li")	相当于$("ul li"),后代选择器
sibilings（selector）	$(".first").siblings("li")	查找兄弟节点，不包括自己本身
nextAll（[expr]）	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$("div").hasClass("protected")	检测当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq（2）	相当于$("li:eq(2))",index从0开始

案例

王者手风琴

QQ录屏20221015004644

页面设计

 <div id="context">
        <ul>
            <li class="add">
                <a href="#">
                    <img src="img/c1.jpg" class="small" />
                    <img src="img/c.png"  class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/h1.jpg" class="small" />
                    <img src="img/h.png"  class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img  src="img/l1.jpg" class="small" />
                    <img  src="img/l.png" class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/m1.jpg" class="small" />
                    <img src="img/m.png"  class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/t1.jpg" class="small" />
                    <img src="img/t.png"  class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/z1.jpg"  class="small" />
                    <img src="img/z.png"  class="big" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="img/w1.jpg"  class="small" />
                    <img src="img/w.png"  class="big" />
                </a>
            </li>
        </ul>
    </div>

css样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #context {
            padding: 15% 24%;
        }
        
        ul {
            width: 760px;
            overflow: hidden;
            background-image: url(img/bg.png);
			border: 1px #125497 solid;
        }
        
        ul li {
            list-style: none;
            float: left;
			border: 1px #125497 solid;
        }
        
        ul li:last-child {
            margin-right: 0;
        }
        
        ul li.add {
            width: 224px;
			margin-left: 20px;
        }
        ul li.add .small {
            display: none;
        }
        
        ul li.add .big {
            display: block;
        }
        
        ul li a {
            display: block;//显示当前图片
			/* position 相对定位和绝对定位 */
			/* relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局 */
            position: relative;
            width: 69px;
            height: 69px;
        }
        .small {
            position: absolute;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
        
        .big { 
            width: 224px;
            display: none;//隐藏元素并脱离文档
        }
    </style>

点击触发事件

<script>
        $(function() {
            $('ul li').mouseover(function() {
				//stop停止动画排队 
               //animate自定义动画 
               //find寻找元素 
              //fadeOut隐藏元素 
              //siblings排除自己之外的元素  
              //fadeIn可见速度
                //鼠标移入当前改变当前照片宽度
				//寻找class="small"的元素设为隐藏
				//其余设为可见
				$(this).stop().animate({width: 224}).find('.small').fadeOut().siblings('.big').fadeIn();
				//其余照片保持不动
				//触摸之外的图片停止排队
				//保持宽度不变寻找class="small"元素设为可见 
				//其余隐藏元素
                $(this).siblings().stop().animate({width: 69}).find('.small').fadeIn().siblings('.big').fadeOut();
            });
        });
    </script>