jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

最新推荐文章于 2023-12-01 17:57:07 发布

置顶

MDR_0820

最新推荐文章于 2023-12-01 17:57:07 发布

阅读量562

点赞数 3

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/MDR_0820/article/details/121050895

版权

jQurey 的概念

jqurey 是一个快速简洁的JavaScript库设计的总之能是写更少的代码做更多的事情

j 就是JavaScript 、Qurey 查询意思就是查询js 把js 中的dom操作做了封装我们可以快速的查询使用里面的功能
jQurey 封装了JavaScript常用的功能代码优化了dom 的操作事件处理动画设计和Ajax 交互

jQurey 的入口函数

     1 等着页面 DOM 加载完毕再去执行js代码
     $(document).ready(function(){
        $('div').hide();
     })
   
     2.等着页面 DOM 加载完毕再去执行js代码

    $(function(){
        $('div').hide()
    })

在这里插入图片描述

jquery对象和DOM对象

jQuery对象和DOM对象之间是可以相互转换的
因为js原生比jQuery更大原生的一些属性和方法jQuery没有给我们封装要使用这些方法和属性需要吧jQuery对象转换为DOM对象才能使用

DOM 对象转换为jQuery对象
$('DOM’对象）
jQuery 对象转换为DOM
$(‘div’)[index] index是索引号
$(‘div’).get（index）index是索引号

jQuery 常用API

jQuery 基础选择器

原生JS 获取元素的方法很多很杂且兼容情况不一致因此jQuery给我们做了一些封装获取元素统一标准

$( " 选择器"）里面选择器直接写css选择器即可但是要加引号

jQuery 层级选择器

在这里插入图片描述

<body>
    <div class="nav"> nav /div </div>
    <div>   divvvvvv</div>
    <ul>
        <li> ul  li  </li>
        <li>  ul  li </li>
        <li> ul li</li>
    </ul>
    <ol>
        <li>ol /li </li>
        <li>ol /li </li>
        <li>ol /li </li>
    </ol>
    <script>
        $(function(){
   
            console.log($('.div'));
            console.log($("ul li"));
        })
    </script>
</body>

在这里插入图片描述

隐式迭代

遍历内部DOM元素（伪数组形式储存）的过程叫做隐式迭代
简单理解在匹配到所有元素进行循环遍历执行相应的方法而不用我们在进行循环简化我们的操作方便调用

<body>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <ul>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
    </ul>
    <script>
        $("div").css("background","pink")    
        $("ul li ").css("color",'red')  
    </script>
</body>

在这里插入图片描述

筛选选择器

在这里插入图片描述

<body>
    <ul>
        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
        <li>ul li 4</li>
        <li>ul li 5</li>
    </ul>
    <ol>
        <li>ol li 1</li>
        <li>ol li 2</li>
        <li>ol li 3</li>
        <li>ol li 4</li>
        <li>ol li 5</li>
    </ol>
    <script>
        $(function(){
   
            $('ul li:first').css('color','red')
            $('ul li:eq(3)').css('color','red')  
            $('ol li:odd').css('color','red')
            $('ol li:even').css('color','blue')
        })
    </script>
</body>

在这里插入图片描述

jQuery 筛选方法

在这里插入图片描述

<body>
    <div class="yey">
        yeye
      <div class="bab">
          babb
         <div class="erz">
             erz

         </div>
     </div>
    </div>
    <div class="nav">
        <p> P </p>
        <div>
            <p>  sp</p>
        </div>
    </div>
    <script>
        // 以下都是方法 都带括号
        $(function(){
   
            // 父级 parent（） 返回的是最近一级的父级
            console.log( $('.erz').parent());   
            // 子级 children（） 亲儿子级  类型子代选择器 ui> li
            // $('.nav').children('p').css('color','red')
            // 可以选择 所以的 子级 find（） 类似于后代选择器
            $('.nav').find('p').css('color','blue')
        })
    </script>
</body>

在这里插入图片描述

jquery 案例下拉菜单 HTML+css+jquery

<script src="jQuery.min.js"></script>
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }
        li{
   
            list-style: none;
        }
        li {
   
            list-style-type: none;
        }        
        a {
   
            text-decoration: none;
            font-size: 14px;
        }        
        .nav {
   
            margin: 100px;            
        }
        
        .nav>li {
   
            position: relative;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
        }        
        .nav li a {
   
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            color: #333;
        }        
        .nav>li>a:hover {
   
            background-color: #eee;
        }        
        .nav ul {
   
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
   
            border-bottom: 1px solid #FECC5B;
        }        
        .nav ul li a:hover {
   
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#"