javascript-jQuery(选择器、排他思想、样式操作、动画效果)

javascript库：一个封装好的特定的集合（方法和函数），比如动画animate、hide、show，比如获取元素等。 一个js文件，对原生js代码进行封装。 比如jQuery就是快速方便的操作DOM 常见js库： Jquery、YUI、移动端的zepto 这些库都是对原生js的封装   jQuery概述 一个快速的简洁的js库，封装了js常用的代码功能，优化DOM操作、事件处理、动画设计、ajax操作。 引入jQuery库 第一步：进入官网下载https://jquery.com/download/ 第二步：复制production内容https://code.jquery.com/jquery-3.6.0.min.js 第三步：在vs中创建js文件粘贴复制内容 第四步：在所需html文件中引入jQuery文件即可。   测试njQuery是否引入成果

jQuery顶级对象$

注：$是jQuery的别称 相当于原生代码中的window   jQuery对象和DOM对象 1，用原生js获取的就是DOM对象 2。用jQuery获取的就是jQuery对象

DOM对象与jQuery对象之间可以相互转换的。

jQuery常用API

jQuery基础选择器

   
我是div
    
我是nav
    

        
1
        
2
        
3
        
4
        
5
    
    

        
6
        
7
    
    

隐式迭代

    
1
    
2
    
3
    
4
    

        
a
        
b
        
c
    
    

jQuery筛选选择器

   

        
儿子
    
    

        
woshi
        

            
pppp
        
    
    

新浪下拉菜单jQuery版

    
        
    

        

            微博
            

                

                    私信
                
                

                    评论
                
                

                    @我
                
            
        
        

            微博
            

                

                    私信
                
                

                    评论
                
                

                    @我
                
            
        
        

            微博
            

                

                    私信
                
                

                    评论
                
                

                    @我
                
            
        
        

            微博
            

                

                    私信
                
                

                    评论
                
                

                    @我
                
            
        
    
    

jQuery排他思想

    1
    1
    1
    1
    1
    1
    

链式编程

    123
    1
    1
    1
    1
    1
    1

    

jQuery样式操作

操作css方法 样式简单用css方法 1.只写属性名，返回属性值 2.参数是属性名，属性值，逗号分离，是设置同样一组属性，属性必须加引号，值如果是数字可以不用跟单位和引号 3.参数可以是对象形式做，可以修改多种样式

 设置类样式方法

 
123
    

案例：Tab栏切换

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价（50000）
                
手机社区
            
        
        

            

                商品介绍模块内容
            
            

                规格与包装模块内容
            
            

                售后保障模块内容
            
            

                商品评价（50000）模块内容
            
            

                手机社区模块内容
            

        
    
    

注：jQuery类操作不影响原先的类名，而js类操作会覆盖原先的类名。  

jQuery效果

显示隐藏：show()\hide()\toggle() Show([speed]):speed 三种预定速度之一字符串“slow” “normal”“fast”

    显示
    隐藏
    切换
    

    

滑动效果 slideDown slideUp slideToggle

上拉滑动
    下拉滑动
    切换
    

    

注：stop停止队列方法，必须写在动画前面。  

淡入淡出效果

    淡入效果
    淡出效果
    切换
    修改透明度
    

    

自定义动画animate

动起来