前端 - JQuery - 《Java笔记》

概念
快速入门
- 步骤
JQuery对象和JS对象的区别
选择器
- 基本语法
- 分类
DOM操作
动画
遍历
事件绑定
案例
插件

概念

一个JavaScript框架，简化JS开发

Javascript框架：本质上就是一些js文件，封装了js的原生代码

快速入门

步骤
下载JQuery
- jquery-xxx.js 与 jquery-xxx.min.js 的区别
  - Jquery-xxx.js : 开发版本【给程序员看，有良好的缩进和注释】
  - Jquery-xxx.min.js：生成版本。程序中使用，没有缩进，体积小，加载快
导入JQuery的js文件
使用

var $divs = $(“div”);
alert($divs); //也可以当作数组使用

JQuery对象和JS对象的区别

1-JQ对象在操作时，更加方便
2-JQ对象和js对象方法不通用
3-两者相互转换
jq —> js : jq对象[索引] 或者 jq对象.get(索引)
js —> jq : $(js对象)

选择器

筛选具有相似特征的元素（标签）

基本语法

事件绑定

//1-获取b1按钮
$(“#b1”).click(function () {
alert(“111”);
})

入口函数

//jquery入口函数（dom文档加载完毕后执行该函数中的代码)
      $(function () {
          ...
      });
/* window.onload 和 $(function) 区别
             window.onload只能定义一次,后面的会覆盖前面的
             $(function)可以定义多次
      */

样式控制

$(function () {
         // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink")
      })

动画

三种方式显示和隐藏元素

默认显示和隐藏
show([speed,[easing],[fn]])
- 参数：
  - speed：动画速度，选项【”slow”,”normal”,”fast”】或毫秒值（如：1000）
  - easing：用来指定切换效果，默认’swing’,可用参数’linear’
    - swing: 慢-快-慢
    - linear 匀速
  - fn：动画完成时执行的函数，传递function对象
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])

滑动显示和隐藏
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

淡入淡出显示和隐藏
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])

遍历
js的遍历方式
- for(初始值;循环结束条件;步长)

jq的遍历方式

jq对象.each(callback)

citys.each(function(index,element){
//alert(this.innerHTML);

//alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
});

$.each(object,[callback])

$.each(citys,function(){
alert($(this).html();
});

for..of: 需要高版本

for(li of citys){
alert($(li).html());
}

事件绑定

jquery标准的绑定方式

jq对象.事件方法(回调函数);

$("#name").click(function(){
alert('回调函数');
});
//click -> 事件方法

on绑定事件/off接触绑定

jq对象.on(“事件名称”,回调函数)

jq对象.off(“事件名称”)

$("#btn").on("click",function(){
alert('..');
})
$("#btn2").click(function(){
$("#btn").off("click");
});//用btn2来解除btn的事件，如果off不传递事件名，则清除所有

事件切换：toggle
- jq对象.toggle(fn1,fn2…)
  - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…..

案例

插件

增强jquery功能

实现方式：
- $.fn.extend(object)
  - 增强通过JQuery获取的对象的功能 $(“#id”)
- $.extend(object)
  - 增强JQuery对象自身的功能 $/JQuery

$.fn.extend({
    //定义了一个check()方法，所有的jq对象都可以调用该方法
    check:function(){
        alert(123);
    }
});

$(function(){
    //获取按钮
    $("#btn-check").check();
    //该方法调用之前定义的check
});

第二种全局方法
$.extend({
    max:function(a,b){
        return a>=b? a:b;
        }
})

//调用全局方法
var max = $.max(4,3);

Java笔记

JQuery

概念

快速入门

步骤

JQuery对象和JS对象的区别

选择器

基本语法

分类

基本选择器

层级选择器

属性选择器

过滤选择器

表单过滤选择器

DOM操作

内容操作

属性操作

CRUD操作

动画

默认显示和隐藏

滑动显示和隐藏

淡入淡出显示和隐藏

遍历

事件绑定

案例

插件