JQuery笔记

JQuery介绍

JQuery版本

jQuery是一个快速的、轻量的、功能丰富的js库。

JQuery版本

大版本分类：

1.x版本：能够兼容IE678浏览器（最终版本1.12.4）
2.x版本：不兼容IE678浏览器（最终版本2.2.4）
//jQuery目前正在更新的版本
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。

压缩版和未压缩版：

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

JQuery常见方法

取/设置 value

JQuery元素对象.val()

$("#input1").val(); //取id为input1的value
$("#input1").val("111"); //设置id为input1的value为111

取/设置元素内容(包括元素标签代码)

JQuery元素对象.html()

$("#d1").html(); //取id为d1元素中的html代码
$("#d1").html("<input type=\"text\" value = \"这是输入框">"); //设置id为d1元素中的html代码为<input type="text" value = "这是输入框">

取/设置元素内容(不包括元素标签代码)

JQuery元素对象.text()

$("#d1").text(); //取id为d1元素中的文本
$("#d1").text("您好"); //设置id为d1元素中的文本为您好

取index

取元素在兄弟元素中的索引：JQuery元素对象.index()

width方法与height方法

设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
//宽度+padding
$(“div”).innerWidth();
//宽度+padding+border
$(“div”).outerWidth();
//宽度+padding+border+margin
$(“div”).outerWidth(ture);

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

JQuery操作CSS

添加Class

JQuery元素对象.addClass()
删除Class

JQuery元素对象.removeClass()
切换Class

JQuery元素对象.toggleClass()

执行一次则会添加或删除此class（有则添加，无则删除）

直接设置css行内样式

单一设置：JQuery元素对象.css(property,value)

多行设置：JQuery元素对象.css({p1:v1,p2:v2})

//<button id="b1">设置单一样式</button>
//<button id="b2">设置多种样式</button>
//<div id="d1">单一样式，只设置背景色</div>
//<div id="d2">多种样式，不仅设置背景色，还设置字体颜色</div>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink"); //只设置背景颜色
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"}); //设置背景颜色和字体颜色
   });
});

JQuery选择器
1. 标签名：$("tagName")
2. id：$("id")
3. 类：$("className")
4. 层级：$("selector1 selector2")
5. 第一个和最后一个
  1. $(selector:first)
  2. $(selector:last)
6. 奇数和偶数
  1. $(selector:odd)
  2. $(selector:even)
7. 是否可见
  1. $(selector:hidden)
  2. $(selector:visible)
8. 属性
  1. 满足选择器条件的有某属性的元素：$(selector[attribute])
  2. 满足选择器条件的属性等于value的元素：$(selector[attribute=value])
  3. 满足选择器条件的属性不等于value的元素：$(selector[attribute!=value])
  4. 满足选择器条件的属性以value开头的元素：$(selector[attribute^=value])
  5. 满足选择器条件的属性以value结尾的元素：$(selector[attribute$=value])
  6. 满足选择器条件的属性包含value的元素：$(selector[attribute*=value])
9. 表单对象
  1. input元素（也会包含textarea,select和button）：$(selector :input)
  2. 会选择type=button的input元素和button元素：$(selector :button)
  3. 单选框：$(selector :radio)
  4. 复选框：$(selector :checkbox)
  5. 文本框(不包括文本域)：$(selector :text)
  6. 提交按钮(有些浏览器会包括button 因为有的浏览器button的type默认是submit)：$(selector :submit)
  7. 图片型按钮：$(selector :image)
  8. 重置按钮：$(selector :reset)
10. 表单对象属性
  1. 可用的输入元素：$(selector :enabled)
  2. 不可用的输入元素：$(selector :disabled)
  3. 被选中的单选框和复选框(有些浏览器会把下拉列表框选中的也算)：$(selector :checked)
  4. 被选中的option元素：$(selector :selected)
11. this选择
  
  在监听函数中使用 $(this)，即表示触发该事件的组件。
```
//<button id="b1">点击隐藏</button>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
});
```
JQuery筛选器
1. JQuery对象中的第一个，最后一个，第几个
  1. 第一个：JQuery元素对象.first()
  2. 最后一个：JQuery元素对象.last()
  3. 第几个：JQuery元素对象.eq(num)
2. 对象的家人
  1. 父元素(最近的一个父元素)：JQuery元素对象.parent()
  2. 祖先(所有比自己高辈分的元素)：JQuery元素对象.parents()
  3. 儿子(最近的一个儿子)：JQuery元素对象.children()
  4. 后代：JQuery元素对象.find(selector)
  5. 所有兄弟：JQuery元素对象.siblings()
  6. 获取前一个兄弟：JQuery元素对象.prev()
  7. 获取前面所有的兄弟元素：JQuery元素对象.prevAll()
  8. 获取后一个兄弟：JQuery元素对象.next()
  9. 获取后面所有的兄弟元素：JQuery元素对象.nextAll()
3. 过滤选择
  
  JQuery元素对象.filter("selector")
```
$div.filter(":hidden"); //返回div元素中隐藏的JQuery元素
```
JQuery操作属性
1. 获取属性：JQuery元素对象.attr("attribute")
2. 修改属性：JQuery元素对象.attr("attribute",“value”)
3. 删除属性：JQuery元素对象.removeAttr("attribute")
4. prop与attr的区别
  
  与prop一样attr也可以用来获取与设置元素的属性。
  区别在于，对于自定义属性和选中属性的处理。
  选中属性指的是 checked,selected 这2种属性
  1. 对于自定义属性 attr能够获取，prop不能获取
  2. 对于选中属性attr 只能获取初始值，无论是否变化
    prop 能够访问变化后的值，并且以true|false的布尔型返回。
  所以在访问表单对象属性的时候，应该采用prop而非attr
JQuery操作节点
1. 创建节点(返回元素对象)：$("HTML代码")
2. 添加、移动节点
  1. JQuery元素对象.append()
    
    把参数对象添加到 JQuery元素里的最后面
    1. 方法1：JQuery元素对象.append(创建的JQuery节点)
    2. 方法2：JQuery元素对象.append("HTML代码")
    3. 方法3(如果参数是页面的存在对象则作用是移动对象)：JQuery元素对象.append($('selector'))
  2. JQuery元素对象.appendTo()
    
    把JQuery元素添加到 参数对象里的最后面
    
    JQuery元素对象.appendTo($('selector'))
  3. JQuery元素对象.prepend()
    
    把参数对象添加到 JQuery元素里的最前面
  4. JQuery元素对象.prependTo()
    
    把JQuery元素添加到 参数对象里的最前面
  5. JQuery元素对象.befor()
    
    把参数对象添加到 JQuery元素的前面
  6. JQuery元素对象.after()
    
    把参数对象添加到 JQuery元素的后面
3. 删除节点
  1. 清除所有子节点
    1. 清除元素上绑定的内容源码(推荐)：JQuery元素对象.empty()
    2. 清除元素(绑定的事件不会被清除，会造成内存泄露)：JQuery元素对象.html(“”)
  2. 清除自己和所有子节点：JQuery元素对象.remove()
4. 克隆节点
  
  JQuery元素对象.clone(includeEvents)
  
  参数(可空)：是否复制节点事件
JQuery动画效果
1. 显示隐藏切换
  1. 显示(参数time可为空)：JQuery元素对象.show(time)
  2. 隐藏(参数time可为空)：JQuery元素对象.hide(time)
  3. 切换(参数time可为空)：JQuery元素对象.toggle(time)
2. 向上滑动向下滑动滑动切换
  1. 向上滑动(参数time可为空)：JQuery元素对象.slideUp(time)
  2. 向下滑动(参数time可为空)：JQuery元素对象.slideDown(time)
  3. 滑动切换(参数time可为空)：JQuery元素对象.slideToggle(time)
3. 淡入淡出淡入淡出切换指定淡化程度
  1. 淡入(参数time可为空)：JQuery元素对象.fadeIn(time)
  2. 淡出(参数time可为空)：JQuery元素对象.fadeOut(time)
  3. 淡入淡出切换(参数time可为空)：JQuery元素对象.fadeToggle(time)
  4. 指定淡化程度：JQuery元素对象.fadeTo(speed,opacity,callback)
    
    speed(可空)：1. 毫秒 2. slow 3. normal 4. fast
    
    opacity：透明度，介于 0.00 与 1.00 之间的数字
    
    callback(可空)：fadeTo 函数执行完之后，要执行的函数，除非设置了 speed 参数，否则不能设置该参数。
4. 自定义动画效果
  
  JQuery元素对象.animate({attribute:'value',...},speed,easing,callback);
5. 动画队列
  1. 可嵌套动画函数形成动画队列(一个一个动画执行)：JQuery元素对象.animate(...).fadeIn(time).slideDown(time)...
  2. 停止动画队列：JQuery元素对象.stop(stopAll,goToEnd)
    
    参数不填默认是停止当前执行的动画，如果队列后续还有动画会执行后面的
    
    参数1(可空)：是否停止所有队列动画
    
    参数2(可空)：是否直接跳到最后的效果
JQuery事件
1. 加载事件
  1. 文档加载
    
    与window.onload不同
    1. 写多个不会覆盖上面的入口函数代码
    2. 而且window.onload需要等待文档图片等外部文件加载完成才会执行，而JQuery入口函数只会等页面加载完成就执行
```
//方法1
$(document).ready(function(){加载代码})
```
```
//方法2
$(function(){加载代码})
```
  2. 图片加载
```
$("#img").load(function(){})
```
2. 点击事件
  1. 单击事件：JQuery元素对象.click(function(){})
  2. 双击事件(与ondblclickDOM事件不同的是jquery双击事件不会触发单击事件)：JQuery元素对象.dblclick(function(){})
3. 键盘事件
  1. 按下键盘：JQuery元素对象.keydown(function(e){})
    
    【能获取所有按键】【不能识别大小写】【不能获取最后一个字符】
  2. 按住键盘：JQuery元素对象.keypress(function(e){})
    
    【不能获取功能键(如F1 SHIFT等)】【能够识别大小写】【不能获取最后一个字符】
  3. 键盘弹起：JQuery元素对象.keyup(function(e){})
    
    【能获取所有按键】【不能识别大小写】【能获取所有字符】
  PS：JQuery的键盘事件使用 e.which 取值
4. 鼠标事件
  1. 鼠标按下：JQuery元素对象.mousedown(function(){})
  2. 鼠标弹起：JQuery元素对象.mouseup(function(){})
  3. 鼠标进入三种方式：
    1. 鼠标进入mousemove：JQuery元素对象.mousemove(function(){})
      
      【当鼠标进入元素，每移动一下都会被调用】
    2. 鼠标进入mouseenter：JQuery元素对象.mouseenter(function(){})
      
      【当鼠标进入元素，调用一下，在其中移动，不调用】
      
      【当鼠标经过其子元素不会被调用】
    3. 鼠标进入mouseover：JQuery元素对象.mouseover(function(){})
      
      【当鼠标进入元素，调用一下，在其中移动，不调用】
      
      【当鼠标经过其子元素会被调用】
  4. 鼠标离开两种方式：
    1. 鼠标离开mouseleave：JQuery元素对象.mouseleave(function(){})
      
      当鼠标经过其子元素不会被调用
    2. 鼠标离开mouseout：JQuery元素对象.mouseout(function(){})
      
      当鼠标经过其子元素会被调用
5. 焦点事件
  1. 获取焦点：JQuery元素对象.focus(function(){})
  2. 失去焦点：JQuery元素对象.blur(function(){})
6. 内容改变事件
  
  JQuery元素对象.change(function(){})
  
  PS：对于文本框，只有当该文本失去焦点的时候，才会触发change事件。
7. 提交事件
  
  JQuery元素对象.submit(function(){})
8. 绑定事件
  1. JQuery元素对象.bund("click mouseenter", function(){})
  2. JQuery元素对象.delegate("p", "click", function(){})
    
    JQuery元素对象为父元素，p为子元素如果父元素中动态添加p元素后面添加的元素也会有指定事件
  3. JQuery元素对象.on(events[,selector][,data],handler)
    
    第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    第四个参数：handler，事件处理函数
9. 解绑事件
  1. unbind
    1. 解绑所有事件：JQuery元素对象.unbind()
    2. 解绑指定的事件：JQuery元素对象.unbind("event")
  2. undelegate
    1. 解绑所有事件：JQuery元素对象.undelegate()
    2. 解绑指定的事件：JQuery元素对象.undelegate( “event” )
  3. on
    1. 解绑匹配元素的所有事件：JQuery元素对象.off()
    2. 解绑匹配元素的所有click事件：JQuery元素对象.off("event")
    3. 解绑所有委托事件，保留自己的事件：JQuery元素对象.off("event","**")
10. 触发事件
JQuery元素对象.trigger("event")

JQuery链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

返回距离最近的上一次对象：.end()

//  <ul class="first">
//     <li class="foo">list item 1</li>
//     <li>list item 2</li>
//     <li class="bar">list item 3</li>
//  </ul>
$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');
//执行后.foo和.bar的li将变色

JQuery each遍历

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
JQuery元素对象.each(function(index,element){})

参数一表示当前元素在所有匹配元素中的索引号
参数二表示当前元素（DOM对象）

JQuery AJAX

提交AJAX请求：

$.ajax({
   url: page,
   data:{"name":value},
   success: function(result){
   }
});

使用get方式提交ajax：

$.get(
       page,
       {"name":“value”},
       function(result){
       }
);

使用post方式提交ajax：

$.post(
    page,
    {"name":“value”},
    function(result){
    }
);

最简单的调用ajax的方式：

JQuery元素对象.load(page,{"name":“value”});
//JQuery元素对象：用于显示AJAX服务端文本的JQuery元素对象
//page(可选): 服务端页面
//参数三(可选)：提交的数据

格式化form下的输入数据：

form的JQuery元素对象.serialize()

返回form表格内name=value用&组合的字符串

JQuery数组操作

遍历

var a = [1,2,3];
$.each( a, function(i, n){
    console.kog( "元素[" + i + "] : " + n);
})
//参数1 为数组 不选则为JQuery元素对象遍历
//参数2 为回调函数，i为下标，n是内容

去除重复：$.unique(array)

PS：执行unique之前，要先调用sort对数组的内容进行排序。
元素是否存在：$.inArray(value,array)

JQuery字符串操作
1. 去除首尾空白(返回处理的字符串)：$.trim(string)
JQuery JSON操作
1. json格式的字符串转json对象(返回json对象)：$.parseJSON(string)
JQuery和DOM对象互转
1. JQuery转DOM
  1. 方法1(返回DOM对象)：JQuery元素对象.get(0)
  2. 方法2(返回DOM对象)：JQuery元素对象[0]
2. DOM转JQuery$()
  
  返回JQuery对象：$(DOM对象)
JQuery多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
```
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
```

JQuery封装插件

JQuery,prototype.func = function(){
		//函数体
};

posted @ 2021-03-13 22:18 镜像山海阅读(187) 评论(0) 收藏举报

刷新页面返回顶部

镜像山海

JQuery笔记

JQuery介绍

JQuery常见方法

JQuery操作CSS

JQuery选择器

JQuery筛选器

JQuery操作属性

JQuery操作节点

JQuery动画效果

JQuery事件

JQuery链式编程

JQuery each遍历

JQuery AJAX

JQuery数组操作

JQuery字符串操作

JQuery JSON操作

JQuery和DOM对象互转

JQuery多库共存

JQuery封装插件

公告