JQuery使用及基础原理解析相关笔记（一）

最新推荐文章于 2024-05-12 22:47:57 发布

badongqing5553

最新推荐文章于 2024-05-12 22:47:57 发布

阅读量4.6k

点赞数

文章标签： javascript 5g json ViewUI

原文链接：http://www.cnblogs.com/jwlLWJ2018/p/9247733.html

版权

1.jquery

◆很强大，但是很臃肿，需要自己封装一个jquery，要用到jqery中哪些方法，就把原来jquery中的方法拿出来。

◆jquery有两大特点：链式编程、隐式迭代（遍历）。

2.原生js的入口函数与jquery的入口函数

◆原生js的入口函数：

window.onload = function () {}

是页面文档和页面资源都加载完毕之后开始执行函数里面的代码，

document.onready =function () {}

是页面文档加载完毕之后开始执行函数里面的代码(但是这个原生的js的入口函数是jquery脚本库扩展出来的事件，只有在引入了jquery脚本库的时候才能够使用document.onready，没有引入脚本库的时候document对象是没有这个事件的)，document.onready 比 window.onload要快一点，因为图片资源还没有显示，document.onready里的代码就执行了，window.onload是页面所有资源都加载完毕才执行的，window对象没有onready。

◆jquery的入口函数：

$(document).ready(function () {});
$(function () {});
$(window).ready(function () {});

这三种方式都和document.onready一样，都是页面文档加载完毕之后就进入JQuery的入口函数开始执行函数里面的代码，

$(window).load(function () {});

这种方式和

window.onload=function(){}

一样，都是页面文档和页面资源都加载完毕之后开始执行函数里面的代码。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery的入口函数与原生js的入口函数</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
<script>


    //原生js的入口函数  ：页面文档加载完毕之后，
    // 页面需要加载的资源也加载完毕之后，就进入原生js的入口函数
    window.onload = function () {
        alert("原生js的入口函数  window.onload")

    }

    //window对象没有onready事件  只有document对象有   ready要比load快
//    window.onready=function(){
//        alert("原生js的入口函数  window.onready")
//
//    }

    //原生js的入口函数  ：页面文档加载完毕之后，就进入原生js的入口函数
    //效果与下面的$(document).ready(function(){});差不多   //但是这个document对象的事件是jquery脚本库扩展出来的，
	 //所以在没有引入jquery脚本库时，
	 //document对象没有这个事件
    document.onready = function () {
        alert("原生js的入口函数  document.onready")

    }

    //JQuery的入口函数 第一种方式 ：页面文档加载完毕之后 就进入JQuery的入口函数
    $(document).ready(function () {
        alert("JQuery的入口函数 第一种方式 $(document).ready")
    });

    //JQuery的入口函数 第二种方式：页面文档加载完毕之后 就进入JQuery的入口函数
    $(function () {
        alert("JQuery的入口函数 第二种方式 $(function () ")
    });

    //JQuery的入口函数 第三种方式：页面文档加载完毕之后 就进入JQuery的入口函数
    $(window).ready(function () {
        alert("JQuery的入口函数 第三种方式 $(window).ready")

    })

    //这种jquery的入口函数 效果与window.onload差不多
    $(window).load(function () {
        alert("JQuery的入口函数 第四种方式 $(window).load")

    });

</script>
<img src="https://img-blog.csdnimg.cn/2022010613531420258.png" alt="">
</body>
</html>

3.Query与$的区别：其实它们是一样的，都是一个函数名，并且它们完全相等，jQuery===$。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery与$的区别（其实他们是一样的）</title>
    <script src="jquery-1.11.1.js"></script>
    <script>


        console.log(console);
        console.log($);//$其实是一个函数名
        console.log(jQuery);//jQuery其实是一个函数名
        console.log($===jQuery);//他们是用一个函数
    </script>
</head>
<body>
</body>
</html>

4.jQuery中的dom对象与原生js中的dom对象的区别

◆jQuery的dom对象是对js的dom对象的封装
◆jQuery无论是通过什么方式获取的dom对象都是伪数组，伪数组中装的成员就是原生js的dom对象。
◆不光是将原生js的dom对象封装到数组中，并且还给这个数组增加了很多功能方法，也就是给原来的js的dom对象穿上了一层带有功能的皮肤，虽然原生的js的dom对象也可以自己封装这些功能方法，但是兼容性没有jQuery的那么好。
★模拟jQuery对象操作css样式的功能方法

 Object.prototype.css = function (json) {
        var cssArr = [];
        for (var key in json) {
            cssArr.push(key + ":" + json[key]);
        }
        this.style.cssText = cssArr.join(";");
    }
    box.css({width: "200px", height: "200px", "background-color": "#f00"});

★jquery与js操作样式的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery与js操作样式的方式</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>


<script>
    var box1 = document.getElementById("box1");
    var box2 = $("#box2");
    //原生js一次性设置所有的样式 可以使用 cssText属性
    box1.style.cssText = "width:200px;height:200px;background-color:#0f0";
    //jquery一次性设置所有的样式 可以使用css();
    box2.css({width: "200px", height: "200px", "background-color": "#f00"});

    //jquery获取的dom对象是对js获取的dom对象进行了封装,
    // 给js的dom对象穿上了一层带有功能的皮肤

    //    //自己给原生js封装一下并且也穿上一层功能皮肤
    Object.prototype.css = function (json) {
        var cssArr = [];
        for (var key in json) {
            cssArr.push(key + ":" + json[key]);
        }
        this.style.cssText = cssArr.join(";");
    }
    box1.css({width: "200px", height: "200px", "background-color": "#f00"});

</script>
</body>
</html>

◆jQuery中的Dom对象与js中的Dom对象的区别和联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的Dom对象与js中的Dom对象的区别和联系</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="box" class="cbox"></div>
<script>
    // js和jquery通过id获取dom对象\\

    var box = document.getElementById("box");
    var jbox = $("#box");
    //<div id="box" class="cbox"></div>
    console.log(box);
    //jQuery.fn.init [div#box.cbox, context: document, selector: "#box"]
    console.log(jbox);


    console.log("-----------------------------------");

    // js和jquery通过class获取dom对象\\
    var cbox = document.getElementsByClassName('cbox');
    var jcbox = $(".cbox");
    //HTMLCollection [div#box.cbox, box: div#box.cbox]
    console.log(cbox);
    //jQuery.fn.init [div#box.cbox, prevObject: jQuery.fn.init(1), context: document, selector: ".cbox"]
    console.log(jcbox);


    console.log("-----------------------------------");

    // js和jquery通过tagName获取dom对象\\
    var div = document.getElementsByTagName("div");
    var jdiv = $('div');
    //HTMLCollection [div#box.cbox, box: div#box.cbox]
    console.log(div);
    //jQuery.fn.init [div#box.cbox, prevObject: jQuery.fn.init(1), context: document, selector: "div"]
    console.log(jdiv);




    console.log("-----------------------------------");

    //js通过id获取的是一个dom对象  而jquery通过id获取的是个数组，
    //js通过tagName与class获取的是一个数组  jquery通过tagName与class获取的也是一个数组
    //通过结构可以看出，jquery获取的dom对象是对js获取的dom对象进行了封装。

</script>
</body>
</html>

5.原生的js的dom对象可以和jQuery的dom对象相互转换

◆js的dom对象转换为jQuery的dom对象：$(js的dom对象)或jQuery(js的dom对象)。

◆jQuery的dom对象转换为js的dom对象：jQuery的dom对象[index]或jQuery的dom对象.get(index)，就可以获取jQuery的dom对象的伪数组中的一个dom对象，但是如果get方法中不写索引就可以获取jQuery的dom对象的伪数组中的所有的dom对象，jQuery的dom对象.get()获取一个正常的原生js的dom对象的数组，不再是伪装数组。

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的dom对象与js的dom对象之间相互转换</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
<div></div>
<div class="boxc"></div>
<div id="boxi"></div>
<div></div>
<div></div>
<script>

    //js的dom对象
    var boxtag = document.getElementsByTagName("div");
    var boxc = document.getElementsByClassName("boxc");
    var boxi = document.getElementById("boxi");

    //jquery的dom对象
    var jqboxtag = $("div");
    var jqboxc = $(".boxc");
    var jqboxi = $("#boxi");

    //使用jquery的dom对象 改变css样式
    jqboxtag.css({width: 100, height: 100, border: "1px solid #0f0"});

    //将js 的dom对象 转换为jquery的dom对象
    boxi = $(boxi);
    //使用转换为jquery的dom对象 改变css样式
//    boxi.css({"background-color": "#f00"});//可以传json 设置多个属性
    boxi.css("background-color", "#f00");//可以传字符串 设置一个属性

    //将jquery的dom对象 转换为js的dom对象
    jqboxc = jqboxc[0];
    jqboxc.style["background-color"] = "#ff0";

    console.log(jqboxtag);
    console.log(jqboxtag.get());
    //    再将jquery的dom对象 转换为js的dom对象
    jqboxi = jqboxi.get(0);//这个方法如果不传参数 则会返回一个数组
    jqboxi.innerHTML = "将jquery的dom对象 转换为js的dom对象成功";

    //jquery的dom对象都是数组，将原生的js对象封装到了一个数组中，
    // 所以你才能够通过[]来获取原生的js的dom对象，
    // get方法是给这个数组新增的，传递索引时就返回dom对象，
    // 不传索引时就返回装着dom对象的正常数组。

</script>
</body>
</html>

6.jQuery中的伪数组是怎么实现的，清空原本数组中的原型（所有功能方法），添加自己新增的功能方法，添加索引为字符串的成员context

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象是这样的伪数组</title>
</head>
<body>
<script>
    //模拟jquery的dom对象的封装 ，jquery的dom对象就是这样的伪数组
    var arr = [];
    arr[0] = 0;
    arr[1] = 1;
    arr[2] = 2;
    arr[3] = 3;
    arr[4] = 4;
    arr["5"] = 5;

    //js的数组[]里面不光是索引 还可以是字符串
    arr["context"] = document;

        //清空数组的原型  没有数组的方法了
        arr["__proto__"] = null;

    console.log(arr);//打印伪数组

    //这样只能遍历索引为数字的   或者索引为字符串的数字的
    for (var i = 0; i < arr.length; i++) {
        console.log(i + "   " + arr[i]);
    }

    //这样既可以遍历索引为数字的也可以遍历索引为字符串的
    for (var key in arr) {
        console.log(key + "  " + arr[key]);
    }

</script>
</body>
</html>

7.简单使用jQuery：隔行变色、页面开关灯

◆隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery进行隔行变色</title>
    <script src="jquery-1.11.1.js"></script>

    <script>
        $(document).ready(function () {
            var liArr = $("li");
            //因为jquery的dom对象是伪数组 所以可以直接使用for循环
            for (var i = 0; i < liArr.length; i++) {
                if (i % 2 == 0) {
                    liArr.get(i).style.backgroundColor = "#f00";
                } else {
                    liArr[i].style.backgroundColor = "#0f0";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
    <li>使用jQuery进行隔行变色</li>
</ul>
</body>
</html>

◆页面开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery进行页面开关灯</title>
    <style type="text/css">
        img {
            display: block;
            margin: 100px auto;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(document).ready(function () {
            var btns = document.getElementsByTagName("button");
            var body = $("body");

            $(btns[0]).click(function () {//开灯
                body[0].style.backgroundColor = "white";
            })
            $(btns[1]).click(function () {//关灯
                body.get(0).style.backgroundColor = "black";
            })
        });

    </script>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<img src="images/jQuery对象和DOM对象.png" width="500" alt="">
</body>
</html>

8.jQuery的基本选择器：

◆无论什么选择器，返回的都是封装着原生的dom对象的伪数组。

◆$(id选择器)，$(element选择器)，$(class选择器)，$(*通配符选择器)，$(选择器1，选择器2，选择器3，选择器4)....$(css选择器)，其实在css中使用的选择器，都可以放到$()中作为选择器

$("li")
$(".li")
$("*")
$("li,.li,#li,*")

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>
<ul>
    <li></li>
    <li class="li"></li>
    <li id="li"></li>
    <li class="li"></li>
    <li></li>
</ul>
<script>
    //元素选择器
    var element=$("li");
    element.css({width:"100px",height:"100px","margin-top":"5px","background-color":"#501"});

    //类选择器
    var class1=$(".li");
    class1.css("background-color","#091");

    //id选择器
    var id1=$("#li");
    id1.css({"border":"1px solid #009","background-color":"#ff0"});

    //*通配符选择器
    var all0=$("*");

    //并集选择器
    var bj=$("li,.li,#li,*");

</script>
</body>
</html>

9.jQuery的层级选择器：

◆$(祖子)后代选择器，$(父>子)子代选择器，$(前+紧接着的后)后兄弟选择器，$(前~所有的后)后同辈选择器，其实在css中使用的选择器，都可以放到$()中作为选择器

$("ul li")
$("ul>li")
$("#prv+ol")
$("#prv~li")

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //后代选择器
            var li1 = $("ul li");
            li1.css({"background-color":"#0f0","margin":"5px"});

            //子代选择器
            var li2 = $("ul>li");
            li2.css({"border":"1px solid #f00"});

            //后兄弟选择器
            var next = $("#prv+ol");
            next.css("border","2px solid #00f");

            //后同辈选择器
            var nextall = $("#prv~li");
            nextall.css("border","5px solid #000");
        });
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li id="prv"></li>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <li></li>
    <li></li>
</ul>
</body>
</html>

10.jQuery的基本过滤选择器

◆在基本选择器的基础上进行过滤操作：如$("li:first");，找到所有li后直接找到第一个li。

:first过滤第一个、

:not(selector)过滤不包含selector的、

:even过滤索引为偶数的、

:odd过滤索引为奇数的、

:eq(index)过滤索引等于index的、

:gt(index)过滤索引大于index的、

:last过滤最后一个、

:lt(index)过滤索引小于index的、

:header过滤h1-h6、

:animated过滤正在执行动画的、

:focus过滤已经获取焦点。

11.jQuery的筛选选择器

◆ 筛选过滤选择器操作：如$("li").eq(0);和$("li:even").eq(0);，前者表示找到所有li后过滤第一个li，后者表示找到所有索引为偶数的li后过滤第一个。

//    eq(index | -index) //等于索引的元素
//    first() //第一个元素
//    last() //最后一个元素
//    hasClass(class) //是否包含类
//    filter(expr | obj | ele | fn)
//    is(expr | obj | ele | fn)
//    map(callback)
//    has(expr | ele)
//    not(expr | ele | fn) 是否不包含
//    slice(start, [end])

◆筛选查找选择器操作：如$("li").eq(0).next();或者$("li:first").next();，都是找到第一个li然后在此基础上查找下一个。

//    children([expr]) //找子代
//    closest(e | o | e)1.7 *
//    find(e | o | e)//从jquery对象的后代中查找必须制定参数，如果不指定获取不到元素
//    next([expr])//下一个
//    nextall([expr])//下面的全部
//    nextUntil([e | e][, f])
//    offsetParent() //带有定位的父节点
//    parent([expr]) //父节点
//    parents([expr])
//    parentsUntil([e | e][, f])
//    prev([expr]) //上一个
//    prevall([expr]) //上面的全部
//    prevUntil([e | e][, f])
//    siblings([expr]) //所有兄弟 除了自己

12.使用JQuery的选择器来DIY动画效果：下拉菜单、隔行变色、高亮显示戏曲牌、手风琴折叠面板、服饰广告

◆下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery的选择器制作下拉菜单</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li {
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }

    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>

        //需求：当移入到一级菜单时，显示对应的二级菜单，移出时隐藏对应的二级菜单
        //思路：所有一级菜单的鼠标移入事件，
        // 然后show当前一级菜单下的ul，
        // 移出时hide当前一级菜单下的ul
        //步骤：
        //1.获取事件源及相关元素对象
        //2.绑定事件
        //3.书写事件驱动程序

        $(document).ready(function () {

            //1.获取事件源及相关元素对象
            var wrap = $(".wrap");
            var liArr = wrap.children("ul").children("li");
//            console.log(wrap)
//            console.log(liArr)

            //2.绑定事件
            liArr.mouseenter(function () {
                $(this).children("ul").show();
            });
            liArr.mouseleave(function () {
                $(this).children("ul").hide();
            });


            //3.书写事件驱动程序

        });


    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单2</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单3</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

◆隔行变色

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery的选择器制作-隔行变色</title>
</head>
<body>
<ul>
    <li>使用jQuery的选择器制作-隔行变色</li>
    <li>使用jQuery的选择器制作-隔行变色</li>
    <li>使用jQuery的选择器制作-隔行变色</li>
    <li>使用jQuery的选择器制作-隔行变色</li>
    <li>使用jQuery的选择器制作-隔行变色</li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>

    //需求：
    // 首先 让ul中的li 索引为偶数就变绿，索引为奇数就变红，
    // 然后让鼠标移入时颜色变蓝，移除就恢复原样
    //思路：
    //使用:even和:odd基本过滤器来找到对应的li改变其颜色
    //设置li的鼠标移入事件和移出事件，并且设置一个计数器
    //鼠标移入时记录颜色，鼠标移出时把记录的颜色赋值回去
    //步骤：
    //获取事件源及相关元素对象
    //绑定事件
    //书写事件驱动程序

    //获取事件源及相关元素对象
    var evenLi = $("li:even");//偶数索引的li
    var oddLi = $("li:odd");//奇数索引的li
    var allLi = $("li");//全部li

    //设置隔行变色
    evenLi.css("background", "#0f0");
    oddLi.css("background", "#f00");

    //绑定事件
    var color = "";
    allLi.mouseenter(function () {
        color = $(this).css("background");
        $(this).css("background", "#00f");
    });
    allLi.mouseleave(function () {
        $(this).css("background", color);
    });


    //书写事件驱动程序


</script>
</body>
</html>

◆高亮显示戏曲牌

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery的选择器制作-高亮显示戏曲牌</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //防止图片加载不出来
        $(window).load(function () {
            //需求：首先让所有图片透明度变为0.4，当鼠标移入到某一张图片上时透明度变为1.0
            //思路：改变透明度而已，设置opacity属性即可
            //步骤：
            //1.获取事件源及相关元素对象
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源及相关元素对象
            var liArr = $(".wrap>ul>li");
            liArr.css("opacity", "0.4");
            //2.绑定事件
            liArr.mouseenter(function () {
                $(this).css("opacity", "1.0");

            });
            liArr.mouseleave(function () {
                $(this).css("opacity", "0.4");

            });

            //3.书写事件驱动程序


        });

    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>

◆手风琴折叠面板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用jQuery的选择器制作-手风琴折叠面板</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: #e0ecff;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color: #fff;
            display: none;
        }

    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function () {

            //需求：当点击手风琴的某个面板的标题时，
            // 展开当前面板中的内容
            // 隐藏其它面板中的内容
            //思路：设置每一个标题的单击事件
            //      当点击时让内容的显示
            //      让其它面板的内容隐藏
            //步骤：
            //1.获取事件源及相关元素对象
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源及相关元素对象
            var span = $(".parentWrap>.menuGroup>.groupTitle");

            //2.绑定事件
            span.click(function () {
                //链式书写，显示自己 隐藏其它
                $(this).next("div").show().parent("li").siblings("li").children("div").hide();
            });

            //3.书写事件驱动程序


        });

    </script>
</head>
<body>
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>
</body>

◆服饰广告

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用jQuery的选择器制作-淘宝精品服饰广告</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function () {

            //需求：当鼠标移入到对应的栏目时显示对应的商品
            //思路：先给左边的栏目设置鼠标移入事件  对应的li索引展示对应的商品
            //      再给右边的栏目设置鼠标移入事件  在对应的索引上加9
            //步骤：
            //1.获取事件源及相关元素对象
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源及相关元素对象
            var liLeft = $("#left>li");
            var liRight = $("#right>li");
            var liCenter = $("#center>li");

            //2.绑定事件
            liLeft.mouseenter(function () {
                liCenter.eq($(this).index()).show().siblings().hide();
            });


            liRight.mouseenter(function () {
                console.log(liCenter.eq($(this).index() + 9));
                liCenter.eq($(this).index() + 9).show().siblings().hide();
            });

            //3.书写事件驱动程序


        })

    </script>
</head>
<body>
<div class="wrapper">

    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>

</div>
</body>
</html>

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247733.html

badongqing5553

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery使用及基础原理解析相关笔记（一）

1.jquery◆很强大，但是很臃肿，需要自己封装一个jquery，要用到jqery中哪些方法，就把原来jquery中的方法拿出来。◆jquery有两大特点：链式编程、隐式迭代（遍历）。2.原生js的入口函数与jquery的入口函数◆原生js的入口函数：window.onload = function () {}是页面文档和页面资源都加载完毕之后开始执行...
复制链接

扫一扫