jQuery 新篇

最新推荐文章于 2021-04-30 20:56:50 发布

芷若初荨

最新推荐文章于 2021-04-30 20:56:50 发布

阅读量568

点赞数

分类专栏： Web前端开发之路文章标签： jquery 函数制作插件

本文链接：https://blog.csdn.net/Cecilia620/article/details/72511271

版权

本文详细探讨了jQuery的设计思想，包括选择网页元素、方法函数化和链式操作等。此外，介绍了取值赋值的方法，$()下的has()方法，DOM操作，与CSS的结合使用，遍历技巧，以及一系列实用插件的示例，如表单验证、图片灯箱、搜索插件等。文章最后提到了jQuery的工具函数，帮助开发者更好地理解和运用jQuery来提高效率。

摘要由CSDN通过智能技术生成

1.JQuery设计思想

*选择网页元素

**模拟CSS选择元素

**独有表达式选择

**多种筛选方法

*JQuery写法

**方法函数化

**链式操作

**取值赋值合体

2.取值赋值

*当一组元素时，取值的是一组中的第一个

*当一组元素时，赋值的是一组中的全部元素

eg:
$('#div').html('hello');——赋值
$（'#div'）.html（）;——取值

3.$()下的常用方法

has（）-包含

eg:$('div').has('span').css('background','red');//
not（）-不过滤，filter的反义功能
filter()-对一组元素进行选择（过滤）

eg:
$('div').filter('.box').css('background','red');//选择类名为box的div
$('div').not('.box').css('background','red');//不选类名为box的div

区别：
*filter和not是针对当前元素，has是针对当前元素包含的内容。
next()-选择下一个兄弟节点

eg:$('div').next().css('backgorund','red');

prev()-选择上一个兄弟节点

eg:$('div').prev().css('backgorund','red');

find()-查找

eg:$('div').find('h2').css('backgorund','red');

eq()-一组元素中的下标（和数组中下标用法相同）

eg:$('div').find('h2').eq(1).css('backgorund','red');

index()-索引节点
attr()-设置属性、类名等

eg:$('div').attr('calss','box');

实例：编写选项卡
原生JS和JQuery都可以使用，但JQuery大大简化了代码。
HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>使用JQuery实现垂直菜单</title>
    <meta charset=utf-8>
    <meta name=description content="Menu.html">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/Menu.css">
    <script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<ul>
    <li class="main">
        <a href="#">*菜单一*</a>
        <ul>
            <li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">*菜单二*</a>
        <ul>
            <li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">*菜单三*</a>
        <ul>
            <li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul>
    </li>
</ul>
<script src="js/Menu.js"></script>
<br>
<br>
<br>
<br>
<ul>
    <li class="main1">
        <a href="#">*菜单一*</a>
        <ul>

最低0.47元/天解锁文章

芷若初荨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 新篇

1.JQuery设计思想*选择网页元素 **模拟CSS选择元素**独有表达式选择 **多种筛选方法*JQuery写法 **方法函数化**链式操作**取值赋值合体2.取值赋值 *当一组元素时，取值的是一组中的第一个 *当一组元素时，赋值的是一组中的全部元素eg:$('#div').html('hello');——赋值$（'#div'）.html（）;——取值 3.$()下的常用方法has（）-包含
复制链接

扫一扫

专栏目录