01-jQuery第一天学习笔记

孤城星空

已于 2023-05-08 19:58:58 修改

阅读量31

点赞数 1

分类专栏： jQuery学习日记文章标签： jquery 学习前端

于 2023-03-31 19:09:13 首次发布

本文链接：https://blog.csdn.net/qq_60137795/article/details/129886822

版权

jQuery学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. jQuery概述

概念：jQuery是一个快速，简洁的js库
优点：轻量级，跨浏览器兼容，链式编程，隐式迭代，大大简化了dom操作，支持插件扩展开发

2. jQuery基本使用

官网下载文件，放在本地jQuery.min.js文件中
使用时导入文件
jQuery入口函数

    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #bbb;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 入口函数
        $(function() {
            $('div').hide() 
        })
    </script>

jquery顶级对象$
用原生js获取的对象就是DOM对象，用jquery获取的对象就是jquery对象
jQuery对象只能使用jquery方法，DOM对象则必须使用原生js的属性和方法
jQuery对象和DOM对象相互转换
1. DOM对象转换为jQuery对象：$(DOM对象)
2. jQuery对象转换为DOM对象：$(DOM对象)[index]或$(DOM对象).get(index),index是索引号

3. jquery常用API

3.1 jquery选择器

jquery选择器：$(‘css选择器’)
隐式迭代：遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。即给匹配到的所有元素遍历，执行相应的方法
筛选选择器

语法	用法	描述
: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元素中，选择索引号为偶数的元素

常用筛选方法

语法	用法	说明
parent()	$(‘li’).parent()	查找父级
children(selector)	$(‘ul’).children(‘li’)	查找最近子级
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)
siblings(selector)	$(‘.first’).siblings(‘li’)	查找兄弟节点，不包括自己本身

    $(function() {
            // 选取nav里的li,鼠标进去显示
            $('.nav li').mouseover(function() {
                $(this).children('ul').show()
            })
            // 鼠标离开隐藏
            $('.nav li').mouseout(function() {
                $(this).children('ul').hide()
            })
       })

jquery排他思想

    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        // 选取所有button，隐式迭代
        $('button').click(function() {
            // 先给当前元素添加样式
            $(this).css('background','red')
            // 再给其他兄弟元素去除样式
            $(this).siblings('button').css('background','')
        })
    </script>

链式编程(节省代码量)

$(this).css('background','red').siblings('button').css('background','')

3.2 jquery样式操作

css方法
1. 参数只写属性名，则是返回属性值。$(this).css('color')
2. 参数是属性名，属性值。值是数字，不用跟单位和引号。$(this).css('color','red')
3. 参数可以是对象，设置多组样式。$(this).css({color:'red',width:200}),属性名可以不加引号
设置类样式方法
1. 添加类：$('div').addClass('current')
2. 删除类：$('div').removeClass('current')
3. 切换类：$('div').toggleClass('current')