jQuery函数库基础

最新推荐文章于 2022-12-14 22:11:19 发布

jen51890

最新推荐文章于 2022-12-14 22:11:19 发布

阅读量520

点赞数 1

分类专栏：基础知识文章标签： jQuery 常用选择器常用动画效果

本文链接：https://blog.csdn.net/jen51890/article/details/90438050

版权

基础知识专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jQuery函数库

1. jQuery引入

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        // 写自己的代码调用jQuery函数
    </script>

2. jQuery入口函数

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

    <script src="jQuery/jquery-1.12.4.min.js"></script>
    <script>
        /* 入口函数完整写法
            1. $(目标) -- jq的选择函数：查找元素功能
            2. 遵循jq事件的语法  -- 目标.事件属性(匿名函数)
            3. 表示当网页文档准备好之后要执行...命令
        */
        $(document).ready(function () {  // 完整写法
            alert(1)
        })

        /* 入口函数简化写法
           $(匿名函数) ，工作中常用方式
        */
        $(function () {
            alert(2)
        })
    </script>

3.jquery控制html和css

控制html内容

html()用法：不写参数表示取值，写参数表示修改内容
prop() : 访问或修改html属性值
val() : 访问或修改value属性
attr() : 访问或修改html属性值，用法与prop()相同，但attr()支持访问自定义的html属性

<script src="../js/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
    	alert($('p').html())
        $('img').mouseover(function () {
            // prop() -- 和css单属性用法完全相同  xx(1, 2) xx(1)
            // alert($(this).prop('src'))
            $(this).prop('src', 'icon4.jpg')
        })
        
        alert($('input').val())
        //$('input').val('')
    })
</script>
<body>
    <p>这是一段内容</p>
    <img src="icon3.jpg" alt="">
    <input type="text" value="1111">
</body>

控制css

单属性操作
- 取值： css(属性名)
  
  $('div').css('color')
- 修改: css(属性名,属性值)
  
  $('div').css('color','red')
多属性操作(只支持修改)
- 修改:css(字典)
  
  $('div').css({'color':'red','fontSize':'50px'})

<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        /*控制css  css()  */
         alert($('div').css('width'))		//取值
         $('div').css('background','#0f0')	//修改
         $('div').css({'color':'red','fontSize':'50px'})	//多属性操作
    })
</script>
<!-- html部分 -->
<div>测试css</div>

4.jquery常用的选择器

常用选择器

//与css相同的选择器
$('#myId') //选择id为myId的元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

//选择集过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素

//选择器转移
$('#box').prev(); //上一个同级元素
$('#box').prevAll(); //上面所有的同级元素
$('#box').next(); //下一个同级元素
$('#box').nextAll(); //下面所有的同级元素
$('#box').parent(); //当前元素的父元素
$('#box').children(); //当前元素的所有子元素
$('#box').siblings(); //当前元素的其他兄弟(同级)元素
$('#box').find('p'); //当前元素里的p元素

兄弟选择器siblings() //选择的是当前元素的其他同级元素（兄弟元素）
父级选择器parent() // 选择的是：当前元素的父级元素
子级选择器children() //在这里插入代码片选择的是：当前元素的所有子级元素

5.this 与添加删除类属性

获取元素中的下标 index()

$(this).index()

this：表示当前操作的标签元素

添加删除html元素的类属性

addClass() : 添加类属性的值
removeClass(): 删除类
toggleClass() : 添加或删除类

    <script>
        $(function () {
            //绑定单击事件
            $('button').click(function () {
                 $('div').addClass('box') //添加类
                 $('div').removeClass('box') //删除类,假如不传参，则清空所有类
                //$('div').toggleClass('box') //添加或者删除类
            })
        })
    </script>
    <!-- html部分 -->
    <button>按钮</button>
    <div>文字1</div>

6. 制作动画

基本语法 ：$(‘目标|选择器’).animate(参数1,参数,2参数3,参数4)
- 参数1：字典形式的css键值对
- 参数2：动画持续时间，以毫秒为单位，默认是600
- 参数3：运动曲线: ‘swing’ 或者 ‘linear’
- 参数4：动画执行完后的回调函数

拓展(平面动画类型)

平移动画：先对元素定位，再设置偏移量(left,top,right,bottom)，单位(px，%)
缩放动画: 设置宽和高属性，单位(px，%)
透明度动画： opacity属性，范围 0-1之间
旋转动画：结合css3或者添加其他插件

  <script>
      $(function () {
          $('div').animate(
              { 'width': '800px', 'height': '300px'},2000,'linear',
              function () { 
                  alert('动画完成后执行的回调函数') 
              })
      })
  </script>

2. jquery常用的特殊动画效果方法

1. 滑动动画
  - slideup() ：向上卷起， 隐藏
  - slidedown() ：向下展开， 显示
  - slideToggle() : 卷起或者展开

2.透明度动画
  - fadeIn() ： 透明显示，淡入
  - fadeOut() ： 透明隐藏， 淡出
  - fadeToggle() ：淡入、淡出
  - fadeTo(时间, 透明度小数) ： 设置透明度值与动画持续时间
  
3.显示与隐藏动画
  - show() :显示
  - hide() ： 隐藏
  - toggle() ： 显示与隐藏

```html
   <style>
        div {
            width: 200px;
            height: 200px;
            background: green;
            /* display: none; */
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('button').click(function () {
                 // 滑动动画   透明度动画函数
                 $('div').slideUp()  // 向上卷起 隐藏
                 $('div').slideDown()   // 向下展开  显示
                 $('div').stop().slideToggle()

                 $('div').fadeIn()  // 透明显示 淡入
                 $('div').fadeOut() // 透明隐藏  淡出
                 $('div').fadeToggle()

                // 设置透明度
                 $('div').fadeTo(时间, 透明度小数)
                 $('div').fadeTo(500, 0.6)
            })
        })
    </script>
    <!-- html部分 -->
    <button>按钮</button>
    <div></div>