JQuery学习记录（一）概述、API、效果、属性操作、内容文本值、元素操作、尺寸位置操作

jQuery概述

1.javaScript库：

即library 是一个封装好了的集合（方法或函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如animate、hide、show等
简单理解：一个js文件 里面对我们的原生js（以前学的js）代码进行了封装 存放在里面 这样我们可以快速高效的使用这些封装好的功能
所以jQuery就是为了快速方便的操作dom 里面基本都是函数

2.jQuery的入口函数

相当于原生js中的DOMContentLoaded
不同于原生js中的load事件是等页面文档 外部的js文件css文件图片等加载完毕后才能执行内部的代码

jQuery的顶级对象$

JQuery=$ $ 是jQuery的别称
$是jQuery的顶级对象
相当于原生js中的window
把元素利用
$ 包装成jQuery对象就可以调用该方法

jQuery对象和DOM对象

• 用原生js获取来的对象就是DOM对象
• 用jQuery方法获取来的元素就是jQuery对象
• jQuery对象的本质：利用$对DOM对象包装后产生的对象
• jQuery对象只能用jQuery方法 DOM对象只能用原生js的属性和方法
• DOM对象与jQuery对象之间是可以相互转换的：
• 1.DOM对象转换为jQuery对象：$(DOM对象)

	<video src="mov.mp4"></video>
    <script>
        //DOM对象转换为jQuery对象
        //情况1 直接获取视频 得到的就是jQuery对象
        $('video');
        //情况2 已经使用原生js获取对象了 再加$
        var myvideo = document.querySelector('video');
        $(myvideo);
        //jQuery对象转换为DOM对象
        //方法1 
        $('video')[0].play();
        //方法2
        $('video').get(0).play();
    </script>

jQuery常用API

选择器

基础选择器

选择器直接写css的选择器即可

 		$(function() {
            console.log($(".nav"));
        })

层级选择器

jQuery设置样式

隐式迭代
就是把匹配的所有元素内部进行遍历循环 给每一个元素添加css这个方法 不需要写循环 简化了操作

$("div").css("background","pink");
会给每一个div进行样式的设置

筛选选择器

筛选方法

重点要记住：parent() children() find() siblings() eq()

链式编程

				当前元素变化背景颜色
                $(this).css("background","pink");
                //其余兄弟去掉背景颜色
                $(this).siblings("button").css("background","");
				可以写为：
				$(this).css('background','pink').siblings("button").css('background','')

样式操作

用css方法修改简单的样式

如果属性是复合属性 则采用驼峰命名法（backgroundColor）且属性值要加引号

设置类的方法

注意类名不加点
 			//1.添加类addClass（）
            $("div").click(function() {
                $(this).addClass("current");
            });
            //2.删除类removeClass（）
            $("div").click(function() {
                $(this).removeClass("current");
            });
            //3.切换类 toggleClass()
            $("div").click(function() {
                $(this).toggleClass("current");
            })

jQuery类操作和原生js的className的区别

• 原生js中的className会覆盖元素原先里面的类名
• jQuery类操作只是会对指定类进行操作 不影响原先的类名 相当于追加类名

效果

显示隐藏

• 参数都可以省略 无动画就直接显示
• speed：（slow、normal、fast）或者表示动画时常的毫秒数值如1000
• easing：用来指定切换的效果 默认是swing（慢-快-慢）也可以用linear（匀速）
• fn：回调函数

	<button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(5000,function(){
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(5000,function(){
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
                $("div").toggle(5000,function(){
                    alert(1);
                });
            })
        })
    </script>

滑动

事件切换

• over：鼠标移到元素上要触发的函数 相当于mouseenter
• out：鼠标移除的时候要触发的函数 相当于mouseleave
• 如果只写一个函数 就是说鼠标经过和离开都会触发这个函数

动画队列及停止排队方法

动画或效果一旦触发就会执行 如果多次触发 就会造成多个动画或效果排队执行
停止排队
stop（）

先停止上一个动画 在进行下面的动画 但是stop必须写在动画的前面

淡入淡出

淡入效果

淡出效果

渐进方式调整到指定的不透明度

opacity透明度必须要写 0~1之间
speed速度（slow、normal、fast）或者表示动画时常的毫秒数值（1000）必须写（去掉定义式中的方括号）

自定义动画

		$(function() {
            $("button").click(function() {
                $("div").animate({
                    left:200,
                    top:300,
                    opacity:.4
                },500)
            })
        })

属性操作

固有属性值

获取属性语法

设置元素属性

自定义属性

对于自己定义的属性获取 不能用prop 应该用attr（）

   <div index="1">我是div</div>
   获取 attr（“属性”）类似于原生的getAttribute（）
   console.log($("div").attr("index"));
   设置 attr（“属性”，“属性值”）类似于原生的setAttribute（）
   

数据缓存data（）

data()方法可以在指定元素上存取数据 并不会修改dom元素的结构 一旦页面刷新 之前存放的数据都将会被移除 数据存放在元素的内存里面
在DOM里面看不见

data（）方法不仅可以缓存数据 还可以获得data开头的自定义属性

内容文本值

普通元素内容html（）相当于原生的innerHTML

	<div>
        <span>我是内容</span>
    </div>
    <script>
        // 1.获取设置元素内容html（）
        console.log($("div").html());
    </script>
 最后会把标签一起显示出来   

普通元素文本内容text（）相当于原生的innerText

 console.log($("div").text());

获取设置表单值val（） 相当于原生的value

 		<input type="text" value="请输入内容">
 		console.log($("input").val());
        $("input").val("123")

元素操作

遍历元素

隐式迭代：针对元素进行相同的操作
遍历元素：针对元素进行不同的操作 类似于for 但是比for强大

• 所以想要使用jQuery方法 就需要给这个dom元素转化为jQuery对象
• 回调函数的第一个参数一定是索引号 可以不用index 自己制定索引号的名称
  

			$(function() {
            // 1.each方法遍历元素
            $("div").each(function(index,domEle) {
                console.log(index);
                console.log(domEle);
                //domEle元素没有jQuery方法 所以记得要转换为jQuery元素
                $(domEle).css("color","blue");
            })
        })

创建、添加、删除元素

 			1.创建元素
            var li = $("<li>新创建的li</li>")
            
            2.添加元素
            （1）内部添加
            $("ul").append(li);
            放到原来元素的后面 相当于原生的appendChild
            $("ul").prepend(li);
            放到原来元素的前面prepend
            （2）外部添加
            var div = $("<div>新创建的div</div>");
            $(".test").after(div);
            放到原来元素的后面
            $(".test").before(div);
            放到原来元素的前面

			3.删除元素
             (1)remove() 可以删除匹配的元素——自杀
            $("ul").remove();
            （2）empty() 可以删除匹配的元素的子节点——孩子
            （3）html("")和empty等价

• 内部添加元素 生成之后他们是父子关系
• 外部添加元素 生成之后他们是兄弟关系

尺寸、位置操作

尺寸

• outerWidth（true）包含了所有值
• 如果参数为数字 则是修改相应值 参数可以不写单位

位置

注意只能获取 不能设置