黑马程序员技术交流社区

标题: Web前端进阶-JQuery [打印本页]

---

作者: 森111    时间: 2019-1-4 10:22
标题: Web前端进阶-JQuery


JQueryJQuery基础

==- !!!写在前面:jquery中调用this一定要加上$(this)!!!!==

概念

• 一个javaScript框架,用于简化JS开发
• JavaScript框架:本质上就是一些js文件,封装了js的原生代码
  
  

快速入门

• 使用步骤
• 1.下载JQuery
  
  

目前jQuery有三个大版本：
    1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
         功能不再新增。因此一般项目来说，使用1.x版本就可以了，
         最终版本：1.12.4 (2016年5月20日)
    2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
         功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
         最终版本：2.2.4 (2016年5月20日)
    3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
         一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
         目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
        
!!!注意:jquery-xxx.js与jquery-xxx.min.js的区别
    1.jquery-xxx.js:开发版本,有良好的格式,便于程序员读取源码
    2.jquery-xxx.min.js:生产版本,没有缩进和换行,但体积比开发版本小的多,导入时使用min版本

• 2.导入JQuery的js文件
  
  

   jquery-xxx.min.js

• 3.使用($函数)
  
  

==JQuery对象和JS对象的转换==

• ==注意!!JQuery和JS对象的方法是不通用的==
• 相互转换的方法
  
  

1. jq --> js:jq对象[索引] 或 jq对象.get(索引)
2. js --> jq:$(js对象)
详解:jq对象是一个Object对象,其本质是一个数组
     jq对象可以直接操作数组中的所有对象

基本语法

• 事件绑定
  
  

1.JQuery写法(以onclick为例)
$("#b1").click(function(){...})
2.JS写法
  document.getElementById().onclick = function(){...})

• 入口函数
  
  

1.JQuery写法
$(function(){..})
2.JS写法
window.onload = function(){..}
3.两者的区别
window.onload只能定义一次,如果定义了多次,下面的代码将覆盖上面的代码
$(function)可以定义多次

• 样式控制
  
  

1.JQuery写法(以改变背景色为例)
  CSS写法:$("#div1").css("background-color","red")
  DOM写法:$("#div1").css("backgroundColor","pink")
2.JS写法
  DOM写法:document.getElementById("div").style.backGroundColor = "pink"

==选择器==:筛选具有相似特征的元素(标签)

• 基本选择器
• 1.标签选择器(元素选择器)
  
  

$("html标签名")
获得所有匹配标签名称的元素

• 2.id选择器
  
  

$("#id")
获得指定id的元素

• 3.类选择器
  
  

$(".class")
获得指定类名的元素

• 4.并集选择器
  
  

$("元素1,元素2")

• 层级原则器
• 1.后代原则器
  
  

$("A B")"
选择A元素内部的所有B元素

• 2.子选择器
  
  

$("A>B")"
选择A元素内部的所有B直接子元素

• 属性选择器
• 1.属性名称选择器
  
  

$("A[属性名]")"
选择具有指定属性的A元素

• 2.属性选择器
  
  

$("A[属性名='值']")"/$("A[属性名!='值']")/$("A[属性名^='值']")/$("A[属性名$='值']")/$("A[属性名*='值']")
选择具有指定属性及属性值的A元素/选择不具有指定属性及属性值的A元素/选择以值开始的元素/选择以值结束的元素

• 3.复合属性选择器
  
  

$("A[属性名A='值A'][属性名B='值B"]...)"
选择具有指定属性及值的A元素

• 过滤选择器
• 1.首元素选择器
  
  

:first
获得选择的元素中的第一个元素
例:${"div:first"}:选择第一个div标签

• 2.尾元素选择器
  
  

:end
获得选择的元素中的最后一个元素

• 3.非元素选择器
  
  

:not(selector)
不包括指定内容的元素
例:${"div:not(.one)"}:选择类不为one的div标签

• 4.偶数选择器
  
  

:even
选择索引为偶数的元素,从0开始计数

• 5.计数选择器
  
  

:odd
选择索引为奇数的元素,从0开始计数

• 6.等于索引选择器
  
  

:eq(index)
指定索引元素

• 7.大于索引选择器
  
  

:gt(index)
大于指定索引元素

• 8.小于索引选择器
  
  

:lt(index)
小于指定索引元素

• 9.标题原则器
  
  

:header
获得标题(h1~h6)元素,固定写法

• 表单过滤选择器
• 1.可用元素选择器
  
  

:enable
获得可用元素

• 2.不可用元素选择器
  
  

:disable
获得不可用元素

• 3.选中选择器(选择框)
  
  

:checked
获得单选/复选框选中的元素

• 4.选中选择器(下拉框)
  
  

:selected
获得下拉框选中的元素

• DOM操作
• 1.内容操作
  
  

1.html():获取/设置元素的标签体内容
2.text():获取/设置元素的标签体中的纯文本内容
3.val():获取/设置元素的属性值

• 2.属性操作
  
  

1.通用属性操作
  1) attr():获取/设置元素的属性值
  2) removeAtte():删除属性
  3) prop():获取/设置元素的属性值
  4) removeProp():删除属性

  attr()和prop()的区别:如果操作的是元素的固有属性,建议用prop();如果操作的是元素的自定义属性,建议使用attr();
2.对class属性操作
  1) addClass():添加class属性值
  2) removeClass():删除class属性值
  3) toggleClass():切换class属性
     如果不存在对应值的class属性就添加
     如果存在对应值的class属性就删除
3.样式属性操作
  css():获取/设置元素的样式

• CRUD操作
• C
  
  

1.主对象.xx(新对象)  记这个即可1) append():父元素将子元素追加到末尾  -对象1.append(对象2):将对象2添加到对象1的内部,并在末尾
2) prepend():父元素将子元素追加到开头  -对象1.prepend(对象2):将对象2添加到对象1的内部,并在开头
3) insertAfter():添加元素到对应的元素后边  -对象1.insertAfter(对象2):将对象1插入到元素2的后边
4) insertBefore():添加元素到对应的元素前边  -对象1.insertBefore(对象2):将对象1插入到元素2的前边
2.新对象.xx(主对象)1) appendTo():将子元素添加到父元素的末尾  -对象1.appendTo(对象2):将对象1添加到对象2的内部,并在末尾
2) rependTo():将子元素添加到父元素的开头  -对象1.prependTo(对象2):将对象1添加到对象2的内部,并在开头
3) after():将元素添加到对应元素的后边  -对象1.after(对象2):将对象2添加到对象1的后边
4) before():将元素添加到对应元素的前边  -对象1.before(对象2):将对象2添加到对象1的前边

• D
  
  

1. remove():移除元素
2. empty():清空对象的所有后代元素,但是保留当前
JQuery高级

动画效果

• JQuery提供了三种方式显示和隐藏元素
• 相当于ppt里面换页的动画效果
• 参数
  
  

1.speed:动画的速度.   可以传入三个预定义的值("slow","normal","fast"),或传入毫秒值
2.easing:用来指定切换效果   - swing(默认):动画执行时效果是 先慢,中间快,最后慢    - linear:动画执行的速度是匀速的
3.fn:在动画完成时执行的函数,每个元素执行一次

• 默认显示和隐藏方式
  
  

1.show([speed,[easing],[fn]])  例: show("slow","swing",functoin(){alert("显示了"})
2.hide([speed,[easing],[fn]])  例: hide("slow","swing",functoin(){alert("隐藏了"})
3.toggle([speed,[easing],[fn]])  例:show("slow","swing",functoin(){alert("切换了"})

• 滑动显示和隐藏方式
• 这种动画方式是上下滑动
  
  

1.slideDown([speed,[easing],[fn]])
2.slideUp([speed,[easing],[fn]])
3.slideToggle([speed,[easing],[fn]])

• 淡入淡出显示和隐藏方式
• 这种动画方式是淡入淡出
  
  

1.fadeIn([speed,[easing],[fn]])
2.fadeOut([speed,[easing],[fn]])
3.fadeToggle([speed,[easing],[fn]])

遍历

• js的遍历方式
  
  

for(var i=初始值;条件;步长)

• jq的遍历方式
• 1.jq对象.each(callback)
  
  

callback:每个元素要执行的函数
例:注意!跳出循环和js写法的区别!!!
$("#city li").each(function(index,element){   
if("上海"==$(element).html()){      
//如果当前function返回为false,相当于break,跳出循环       //如果当前function返回值为true,相当于continue,结束本次循环      
return false;    }   
alert(index+":"+element.innerHTML);
});

• 2.$.each(object,[callback])
  
  

$.each(object,[callback])和jq对象.each(callback)的区别
1.$.each的object可以传js数组对象

• 3.for...of:
  
  

3.0版本之后提供的方式for(li of $("#city li"))了解即可

事件绑定

• 1.jquery标准绑定方式
  
  

jq对象.事件方法(回调函数);
注意:如果想给一个对象绑定多个事件,可以使用链式编程,但是不建议写很多个
-->jq对象.事件方法(回调函数).事件方法2(回调函数)

• 2.on/off绑定
  
  

1.jq对象.on("事件名称",回调函数)
2.jq对象.off("事件名称") - 如果off()中不传参数,则会解绑jq对象的所有事件

• 3.事件切换:toggle
  
  

jq对象.toggle(fn1,fn2)- 当单击jq对象会执行fn1,第二次点击会执行fn2
- 注意:1.9版本之后.toggle()方法删除,jQuery Migrate插件可以恢复此功能,在导入jquery之后再引入migrate

插件

• 作用:增强JQuery的功能
• 实现方式
• 1.$.fn.extend(object)
  
  

1.含义:  
对象级别的插件  
增强通过JQuery获取的对象的的功能 如:$("#id")
2.语法:  
$.fn.extend({
      函数名称:function(参数列表){
          函数体;
      },函数名称2:function(参数列表){
          函数体2;
      }  })

• 2.$.extend(object)
  
  

1.含义:
  全局级别的插件
  增强JQuery对象自身的功能
  如:$
2.语法:
  $.extend({
      函数名称:function(参数列表){
          函数体;
      },函数名称2:function(参数列表){
          函数体2;
      }  }  )

• 插件使用案例
• 1.对象级别插件
  
  

1.定义JQuery的对象插件//使用JQuery插件,给jq对象添加一个check()选中所有复选框的方法;定义了之后所有的jq对象都可以调用这个方法
$.fn.extend({
    check:function(){
        //让复选框选中
        //this:调用该方法的jq对象
        this.prop("checked",true)
    }
    unckeck:function(){
        //让复选框不选中
        this.prop("checked",false)
    }})

• 2.全局级别插件
  
  

//对全局拓展方法,求2个值的最大/最小值
$.extend({
    max:function(a,b){
        return: a>=b ? a:b;
    },
    min:function(a,b){
        return: a<=b ? a:b;
    }
})
调用:$.max(4,3) 返回值为4

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2