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

大家好，欢迎来到IT知识分享网。

jQuery概述

1.javaScript库：

2.jQuery的入口函数

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

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

选择器

基础选择器

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

层级选择器

jQuery设置样式

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

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

筛选选择器

筛选方法

链式编程

 当前元素变化背景颜色 $(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
• 如果只写一个函数 就是说鼠标经过和离开都会触发这个函数

动画队列及停止排队方法

淡入淡出

淡入效果

淡出效果

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

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（）

内容文本值

普通元素内容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") 

元素操作

遍历元素

• 所以想要使用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）包含了所有值
• 如果参数为数字 则是修改相应值 参数可以不写单位

位置

注意只能获取 不能设置