jQuery入门

程序员文章站 2024-03-05 12:55:00

...

jQuery简介

jQuery是一个快速，小型功能丰富的JavaScript库它使用一个在多种浏览器上工作的易于使用的API
使得HTML文档遍历和操作事件处理动画 Ajax等工作更简单随着多功能性和可扩展性结合
jQuery改变了数百万人编写Js的方式
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery入口函数的三种写法
$(document).ready(function(){})
jQuery(function(){})
//简化版
$(function(){})

jQuery文件是一个自执行函数

window.jQuery = window.$ = jQuery;    // jQuery中的代码

引入jQuery文件之后就把$ 和 jQuery 方法作为属性给了window

//$是一个函数 可以传参
        // 如果传入的参数是匿名函数 那么$就是入口函数
        $(function () {
            // 如果传入的参数是字符串 那么$就是一个选择器获取元素
            console.log($(".box"));
            // 如果传入的是dom元素 就是一个dom元素转换成的jQuery对象 
            console.log($("<div></div>"));
        })

jQuery入门

DOM和jQuery对象相互转换

dom元素转jQuery对象 直接把dom元素作为参数传递给$方法
        var one = document.getElementById("one")
        console.log($(one));
把jQuery对象转换成dom元素 直接用下标 获取到的是dom元素
        var $divs = $("div");
        console.log($divs[0]);
调用jQuery的get方法 参数传索引
        var $divs = $("div");
        console.log($divs.get(1));

jQuery基础选择器

		// id选择器     $("#id名")
        $("#box")
        // 类选择器     $(".类名")
        $(".box")
        // 标签选择器   $("标签名")
        $("div")
        // 交集选择器   
        $("div.one")   // 选择元素是div 而且类名是one
        // 并集选择器   
        $(".one, .two")  // 类名为one 或 two
        // 子代选择器   $("父元素>子元素")
        $("ul>li")
        // 后代选择器   $("父元素 后代元素")
        $("ul li")

过滤选择器前面加冒号:
$(“li:odd”) 找索引为奇数行
$(“li:even”) 找索引为偶数行
$(“li:eq(0)”) 找到传入的索引号对应的元素

过滤选择器案例 jQuery版隔行变色效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第1个li标签</li>
        <li>第2个li标签</li>
        <li>第3个li标签</li>
        <li>第4个li标签</li>
        <li>第5个li标签</li>
    </ul>

    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("li:odd").css("background-color", "pink")
            $("li:even").css("background-color", "skyblue")

            // 首行和尾行变色
            $("li:eq(0)").css("background-color","gold")
            $("li:eq(9)").css("background-color","gold")

            // 声明变量保存原来颜色
            var bgColor = null;

            $("li").mouseover(function(){
                // 修改颜色前先获取
                bgColor = $(this).css("background-color");

                // 鼠标移入变绿
                $(this).css("background-color","green")
            })
            $("li").mouseout(function(){
                // 鼠标移出恢复
                $(this).css("background-color",bgColor)
            })

        })
    </script>
</body>

</html>

jQuery入门

补充：筛选过滤选择器

        // children(选择器)     子类选择器              $("父元素").children("子元素选择器")
        // find(选择器)         后代选择器              $("父元素").find("后代选择器")
        // siblings(选择器)     兄弟选择器(不包括自己)   $("兄弟元素").siblings("兄弟元素")
        // parent()             父元素选择器            $("选择器").parent()
        // next()               下一个兄弟选择器        $("选择器").next();
        // prev()               上一个兄弟选择器        $("选择器").prev();
        // eq(index)            找对应索引的元素        $("选择器").eq(index);

过滤选择器案例 jQuery版二级菜单效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }
        .wrap{
            width: 300px;
            margin: 100px auto;
        }
        .wrap>ul{
            display: flex;
        }
        .wrap>ul>li>ul{
            display: none;
        }
        a {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: skyblue;
            border: 1px solid;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单2</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var num = 0;
            $(".wrap>ul>li").mouseenter(function(){
                // $(this).children("ul").css("display","block")
                
                $(this).children("ul").show();  // show() 方法本质就是修改css里面的display属性 改为block
            }).mouseout(function(){
                $(this).children("ul").hide();  // hide() 方法本质就是修改css里面的display属性 改为none
            })

            // mouseover  是鼠标移到目标元素及其子元素上时触发
            // mouseout   是鼠标目标元素上触发

            // 开发中多使用 鼠标移入 mouseenter    鼠标移出 mouseleave
        })
    </script>
</body>

</html>

jQuery入门

一行jQuery代码实现手风琴导航栏效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto;
            text-align: center;
        }

        .menu {
            border: 1px solid;
        }

        .menu>div {
            height: 200px;
            display: none;
        }

        .title {
            display: block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            background-color: skyblue;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="wrap">
        <li class="menu">
            <span class="title">QQ空间</span>
            <div style="display: block;">我是QQ空间内容</div>
        </li>
        <li class="menu">
            <span class="title">朋友圈</span>
            <div>我是朋友圈内容</div>
        </li>
        <li class="menu">
            <span class="title">微博</span>
            <div>我是微博内容</div>
        </li>
        <li class="menu">
            <span class="title">论坛</span>
            <div>我是论坛内容</div>
        </li>
    </ul>

    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".title").click(function(){
                $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
            })
        })
    </script>
</body>

</html>

jQuery入门

上一篇： vscode编辑器setting配置

下一篇： jquery 插件

jQuery入门

jQuery简介

jQuery入门

jquery 插件

jQuery入门

thinkphp jquery实现图片上传和预览效果

Mybatis 入门示例代码之 Association

Spring集成Struts与Hibernate入门详解

Android开发入门之对话框简单用法

【宏基因组入门教程】（一）

Android开发入门之Service用法分析

Android开发入门之Appwidget用法分析