jquery基础选择器以及dom对象与jquery对象的转换

jquery基础函数<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http...

努力学习前端的77

217人浏览 · 2020-04-03 16:53:44

努力学习前端的77 · 2020-04-03 16:53:44 发布

jquery基础函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery基础/选择器</title>
    <script src="jquery.min.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
        
    <div class="box">
    </div>

    <ul>
        <li>大比分输给</li>
        <li>那我如果不我</li>
        <li>那我</li>
        <li>引号6额</li>
        <li>了就人工</li>
    </ul>

    <script>
        // jQuery是将原生js里常用的一些功能进行封装

   // $(function () {  });是等待页面的dom元素全部加载完毕，再执行代码 是jquery的入口函数
   $(function () {
            $('.box').hide();

            //   用原生js获取到的对象就是dom对象， 【 dom对象只能使用原生js的属性和方法】
            var mydiv = document.querySelector('.box');
            //document.getElementsByClass('.box');返回一个数组
            //document.getElementById('#**');返回一个唯一对象
            // document.querySelector(css selectors)返回文档中匹配的第一个元素
            console.dir(mydiv);
            // 用jquery方式获取到的对象就是jquery对象，  【 jquery对象只能使用jquery方法】   jquery对象是以数组形式存储的
            $('.box');
            console.dir($('.box'));

            // dom对象和jquery对象相互转换
            var myvideo = document.querySelector('div');// dom对象
            $(myvideo);// dom对象转jquery对象

            // jquery对象转dom对象  方法一：$('div')[index] index是索引号；  方法二：$('div').get(index) index是索引号
            $('video')[0];
            $('video').get[0];

            // jquery设置样式： $('div').css('属性','值');

            // jquery  筛选选择器  ：first选择第一个  :last选择最后一个  :odd选择索引号为奇数的元素   :even选择索引号为偶数的元素  :eq(index) 选择索引下标为index的元素
            $('ul li:first').css('color','red');
            $('ul li:eq(1)').css('color','orange');//索引号从0开始 

            // jquery筛选方法：
            $('li').parent(); //parent()查找父元素  返回的是最近一级的父元素
            $('ul').children('li');//children()查找最近一级的子元素
            $('ul').find('li');//find()相当于后代选择器  找到所有的后代li，包括儿子孙子曾孙子
            $('li:first').siblings('li');// siblings()查找兄弟节点，不包括自身  
            $('li:eq(1)').nextAll('li');//  nextAll()查找当前元素之后的所有同辈元素 比如有5个同级li,此处会返回索引2，3，4的li元素
            $('li:eq(1)').prevtAll('li');// prevtAll()查找当前元素之前的所有同辈元素
            $('li:eq(2)').hasClass('box');// 判断当前元素是否有某个特定类，有就返回true
            
            // eq()返回相应索引号所对应的元素   index()返回某元素的索引号

            // 【jquery动画效果：】 
            //show('speed','easing',fn(),'tiem');  显示
               //[speed](slow/normal/fast)  显示速度
               //[easing(用来指定切换效果：默认swing先慢再快再慢/linear匀速)]  动画切换效果    
               //[fn(回调函数，在动画完成时执行的函数，每个元素执行一次)]  
               //time显示时动画时长，如果没有任何参数就直接显示 
            
            //hide()隐藏
            
            // 滑动：slideDown()下滑 slideUp()上滑 slideToggle()滑动切换，点一下下拉，再点一下上拉
            
            // 淡入淡出效果:fadeIn() fadeOut() fadeToggle() fadeTo(speed,opacity,easing,[fn])修改元素透明度【speed和opacity必须写】
            
            // 自定义动画：animate(params[表示想要更改的样式属性，必须写，属性采用驼峰命名法，属性名可以不加引号],speed,easing,[fn]); 

            //stop() 【动画队列：动画一旦触发就会执行，如果短时间多次触发动画就可能出现动画排队效果】：stop()停止动画或效果。stop【必须写到动画或者效果的前面】相当于停止上一次的动画。实现无论触发多少次动画，只执行最后的一次动画效果   ！！！重要 基本动画特效之前都要用到

            // hover(over/out)鼠标进入和鼠标离开事件  over--mouseenter  out---mouseleave

            // 链式编程
            // $('span').eq(index).show().siblings().hide();让当前元素显示，让当前元素的兄弟元素隐藏

            // $('').css()  修改样式：css({key:'value',key:'value'});属性名可以不加引号，属性值是数字也可以不加引号

            // 通过操作类名来修改样式的方法比较多用 类名的样式写在css中.操作类名不影响原有的类名
            // 【操作类名，可以在类名里定义一些属性和值，要不要这些属性取决于有没有类名】
            // $('').addClass('类名')  添加类 [注意此处类名不要加点]
            // $('').removeClass('类名')  删除类
            // $('').toggleClass('类名')  切换类：如果存在该类名就删除它，如果不存在该类名就添加它。即可以实现，在点击事件中，第一下加上类名，再点一下移除。可以实现动画效果

            //prop('固有属性') 获取元素的固有属性值
            //prop('属性',属性值) 设置元素的固有属性的属性值  
            //【元素的自定义属性用prop()获取不到  通过attr()获取】

            // data() 数据缓存  数据缓存在data()里面，不会改变dom元素  当页面刷新，数据也会被移除

            // $('div').html() 获取文本值内容：相当于innerHTML  修改内容 $('div').html('属性值');  
            //text()  获取或者修改文本内容，不包含标签
            // val()  获取或设置表单/textarea的value值  

            // 节流阀 互斥锁：用来保证在任何时刻都只有一个线程访问该对象
        });
    </script>
    
</body>
</html>