基本使用

1. 入口函数

   	// 入口函数
   	// 文档 准备好 执行函数
   	$(document).ready(function(){
       	$('div').hide()
   	})

2. DOM 对象 和 JQuery 对象的区别

   jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法

       <script>
           // DOM对象 使用原生 js 获取过来的对象就是 DOM对象
       	var div = document.querySelector('div')
       	// jQuery对象 用 jQuery 方式获取过来的对象    本质：通过 $ 把 DOM 元素进行了包装
       	$('span')
       	// jQuery 对象只能使用 jQuery 方法    DOM 对象则使用原生 js 属性和方法
       	$('span').hide()
       	div.style.display = 'none'
   	</script>

3. DOM 对象 和 JQuery 对象互转

       <script>
           // DOM 对象转化为 jQuery 对象
           // $(DOM 对象)
           var myvideo = document.querySelector('video')
           // $(myvideo)[0].play()
           // jQuery 对象转化为 DOM 对象
           // jQuery 对象 [index]
           // jQuery 对象.get(index)
           $('video')[0].play()
           // $('video').get(0).play()
       </script>

4. 隐私迭代

   	<script>
           // 隐私迭代 把匹配的所有元素内部进行遍历循环 给每一个元素都进行一样的操作
           $('div').css('background-color', 'pink')
       </script>

选择器

1. 筛选选择器

       <script>
           $(function(){
               // 将 ul 里的第一个小 li的颜色设置为红色
               $('ul li:first').css('color','red')
               // 将 ul 里索引为 2 的小 li 的颜色设置为蓝色
               $('ul li:eq(2)').css('color','blue')
               // ol 里奇数 li 设置颜色
               $('ol li:odd').css('color','skyblue')
               // ol li偶数 li 设置颜色
               $('ol li:even').css('color','pink')
           })
       </script>

2. 筛选方法 上

   父 parent() 子 children()

       <script>
           // 方法都要小括号()
           $(function () {
               // 父 parent() 返回的是 最近一级的父级元素
               console.log($('.son').parent())
               // 子 children() 子代选择器 类似 ul>li
               console.log($('.grandpa').children())
               // 选择里面所有的孩子 find() 类似 ul li
               console.log($('.grandpa').find('.father'))
           })
       </script>

3. 筛选方法 下

       <script>
           $(function () {
               // 兄弟元素 silbings 除了自身其他所有的亲兄弟
               $('ol .item').siblings('li').css('color', 'red')
               // 第 n 个元素
               // （1）利用选择器的方式选择
               $('ul li:eq(2)').css('color', 'red')
               // （2）利用选择方法 
               $('ul li').eq(3).css('color', 'pink')
               // 判断是否有这个元素 有返回 true 没有返回 false
               console.log($('div:first').hasClass('current'));
               console.log($('div:last').hasClass('current'));
           })
       </script>

操作样式

1. css() 方法

       <script>
           $(function () {
               // css 只有一个参数时 返回值 不修改
               console.log($('div').css('width'));
               // $('div').css('width','300px')
               // 属性名必须加引号 值为数字可以不加引号和单位
               // $('div').css('width',300)
               // 对象方式修改多个样式
               $('div').css({
                   width: 400,
                   height: 400,
                   // 符合属性使用小驼峰命名 不是数字加引号
                   backgroundColor: 'red'
               })
           })
       </script>

2. 类操作

   添加类 addClass() 删除类 removeClass() 切换类 toggleClass()

       <script>
           $(function(){
               // 添加类 addClass()
               // $('div').click(function(){
               //     $(this).addClass('current')
               // })
               // 删除类 removeClass()
               $('div').click(function(){
                   $(this).removeClass('re')
               })
               // 切换类 toggleClass()
               $('div').click(function(){
                   // 有这个类名就清除，没有就添加
                   $(this).toggleClass('current')
               })
           })
       </script>

动画效果

1. 显示与隐藏 show([speed],[easing],[fn])

       <script>
           $(function(){
               // show([speed],[easing],[fn])
               // speed 速度 slow normal fast 或者直接输入时间
               // easing 切换效果 默认 swing 可以参数 linear
               // fn 回调函数
               $('button').eq(0).click(function(){
                   $('.box').show('normal')
               })
               $('button').eq(1).click(function(){
                   $('.box').hide('normal')
               })
               $('button').eq(2).click(function(){
                   $('.box').toggle('normal')
               })
           })
       </script>

2. 滑动效果

   下滑动 slideDown() 上滑动 slideUp() 切换滑动 slideToggle()

       <script>
           $(function(){
               $('button').eq(0).click(function(){
                   // 下滑动 slideDown()
                   $('.box').slideDown('normal')
               })
               $('button').eq(1).click(function(){
                   // 上滑动 slideUp()
                   $('.box').slideUp('normal')
               })
               $('button').eq(2).click(function(){
                   // 切换滑动 slideToggle()
                   $('.box').slideToggle('normal')
               })
           })
       </script>

3. 淡入淡出效果

   淡入 fadeIn() 淡出 fadeOut() 淡入淡出切换 fadeToggle() 修改透明度 fadeTo()

       <script>
           $(function(){
               $('button').eq(0).click(function(){
                   // 淡入 fadeIn()
                   $('div').fadeIn(1000)
               })
               $('button').eq(1).click(function(){
                   // 淡出 fadeOut()
                   $('div').fadeOut(1000)
               })
               $('button').eq(2).click(function(){
                   // 淡入淡出切换 fadeToggle()
                   $('div').fadeToggle(1000)
               })
               $('button').eq(3).click(function(){
                   // 修改透明度 fadeTo()
                   $('div').fadeTo(1000,0.6)
               })
           })
       </script>

4. animate()

       <script>
           $(function () {
               $('button').click(function () {
                   $('div').animate({
                       left: 500,
                       top:500,
                       opacity: .4
                   }, 1000)
               })
           })
       </script>

属性操作

1. element.prop(‘属性名’) 获取元素固有的属性值

   // element.prop('属性名')    获取元素固有的属性值
           console.log($('a').prop('href'))
           // 设置属性
           $('a').prop('title','baidu')
           $('input').change(function() {
               console.log($(this).prop('checked'))
           })

2. 元素的自定义属性通过 attr()

   // 元素的自定义属性通过 attr()
           console.log($('div').attr('index'))
           $('div').attr('index','2')

3. 数据缓存 data() 这个里面的数据是存放在元素的内存里

   $('span').data('uname', 'xiaoyaee')
           console.log($('span').data('uname'));
   // 获取 data-index h5 自定义属性 获取第一个 不用写 data- 返回数字型
           console.log($('div').data('index'));

元素操作

1. 获取设置元素内容 html() 获取设置元素文本内容 text() 获取设置表单值 val()

       <script>
           $(function () {
               // 获取设置元素内容 html()
               console.log($('div').html());
               // $('div').html('123')
               // 获取设置元素文本内容 text()
               console.log($('div').text());
               $('div').text('123')
               // 获取设置表单值 val()
               console.log($('input').val());
               $('input').val('123')
           })
       </script>

2. 遍历元素

   给同一类元素做不同操作 遍历 each()

       <script>
           $(function () {
               // 隐式迭代
               $('div').css('color', 'red')
               // 给同一类元素做不同操作 遍历 each()
               var arr = ['red', 'green', 'pink']
               // $('div').each(function(index,domEle){
               //     // 第一个参数是索引号
               //     console.log(index);
               //     // 第二个参数是 dom 元素对象
               //     console.log(domEle);
               //     $(domEle).css('color',arr[index])
               // })
               // $.each() 方法遍历元素 主要用于遍历数据，处理数据
               // $.each($('div'),function(i,ele){
               //     console.log(i);
               //     console.log(ele);
               // }) 
               $.each(arr, function (i, ele) {
                   console.log(i);
                   console.log(ele);
               })
               $.each({
                   name: 'andy',
                   age: 18
               }, function (i, ele) {
                   console.log(i);
                   console.log(ele);
               })
           })
       </script>

3. 创建添加删除元素

   内部添加：append() 放到内容的最后面 prepend() 放到内容的最前面

   外部添加：after() 放到内容的最后面 before() 放到内容的最前面

   删除元素：remove() 可以删除匹配的元素 empty() 可以删除匹配元素里的子节点 html(”) 可以清空匹配元素里的子节点

       <script>
           // 创建元素
           var li = $('<li>后面添加的 li</li>')
           // 添加元素
           // （1）内部添加
           // $('ul').append(li) // 放到内容的最后面
           $('ul').prepend(li) // 放到内容的最前面
           // （2）外部添加
           var div = $('<div>后面添加的 div</div>')
           // $('div').after(div) // 放到内容的最后面
           $('div').before(div) // 放到内容的最前面
           // 删除元素
           // $('ul').remove() // 可以删除匹配的元素 自杀
           // $('ul').empty() // 可以删除匹配元素里的子节点
           $('ul').html('') // 可以清空匹配元素里的子节点
       </script>

4. 元素大小

   width() 获取元素的 width innerWidth() 获取元素的 width+padding

   outerWidth() 获取元素的 width+padding+border outerWidth(true) 获取元素的 width+padding+border+margin

       <script>
           $(function () {
               // width() 获取元素的 width
               console.log($('div').width());
               $('div').width(300)
               // innerWidth() 获取元素的 width+padding
               console.log($('div').innerWidth());
               // outerWidth() 获取元素的 width+padding+border
               console.log($('div').outerWidth());
               // outerWidth(true) 获取元素的 width+padding+border+margin
               console.log($('div').outerWidth(true));
           })
       </script>

5. 元素位置

   offset() 获取距离文档的位置（偏移）和父级没有关系

   position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准 只能获取不能设置

       <script>
           $(function () {
               // offset() 获取距离文档的位置（偏移）和父级没有关系
               console.log($('.son').offset());
               console.log($('.son').offset().top);
               $('.son').offset({
                   top: 100,
                   left: 100
               })
               // position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准
               // 只能获取不能设置
               console.log($('.son').position());
               $('.son').position({
                   top: 50,
                   left: 50
               })
           })
       </script>

jQuery 文档地址