前端技术——jquery

jquery

http://how2j.cn/k/jquery/jquery-effect/472.html

是封装了JavaScript，能够简化我们写代码的一个JavaScript库，jQuery不是将所有JS全部封装，只是有选择的封装

 

作用:提高了代码的效率。 利用css选择器查找DOM对象,对其操作，操作样式或者增删方法等
免费，开源且轻量级的js库，容量很小
兼容市面上主流浏览器
能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
出错后，有一定的提示信息

Jquery对象只能调用Jquery对象的API
JavaScript对象只能调用JavaScript对象的API

JQuery对象与JavaScript对象是可以互相转化的

 

注意写法

1.语法方法：

 2.事件：

$('#btn1').on('click',function(){
$('#panel1').toggle();

3.DRY      代码优化 （https://www.bilibili.com/video/av41161596/?p=5）

4.

 

 

功能：

（1）HTML元素提取
（2）HTML元素操作
（3）CSS操作

ex:

$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
)};

 

（4）HTML事件函数
（5）JS特效和动画
（6）HTML DOM遍历和修改
（7）AJAX
（8）Utilities

 

$()讲解 : $在JQuery库中，$是JQuery的别名，$()等效于就jQuery()

 

jQuery的基本使用：
a.引包 b.入口函数 c.实现功能

a、引包
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

b.入口函数
$(document).ready(function(){ //.. }); 简化写法：$(function(){ });

 

一、jQuery常用选择器 （jQuery选择器选择规则和css样式相同）

1.基本选择器
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

2 层级选择器
后代 选择器 $("selector1 selector2")
子代 选择器 $("selector1>selector2")

3.过滤选择器
格式：$("selector:filter")
odd $("selector:odd") 奇数过滤选择器
even $("selector:even") 偶数过滤选择器
eq(index) $("selector:eq(index)") 序号过滤选择器

 

 

4.筛选选择器
筛选选择器全都是方法
children(selector)
find(selector)
next()
siblings(selector)
parent()
eq(index)

例：
对选择集进行修饰过滤（类似css伪类）
　　$('#ul1 li:first') //选择id为ul1元素下的第一个li
　　$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
　　$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
　　$('#ul1 li:gt(2)') //选择id为ul1元素下的前三个之后的li
　　$('#myForm : input') // 选择表单中的input元素
　　$('div:visible') //选择可见的div元素
对选择集进行函数过滤
　　$('div).has('p'); //选择包含p元素的div元素
　　$('div').not('.myClass'); // 选择class不等于myClass的div元素
　　$('div').filter('.myClass'); //选择class等于myClass的div元素
　　$('div').first(); //选择第一个div元素
　　$('div').eq(5); //选择第六个div元素
选择集转移
　　$('div').prev('p'); //选择div元素前面的第一个p元素
　　$('div').next('p'); //选择div元素后面的第一个p元素
　　$('div').closest('form'); //选择离div最近的那个form父元素
　　$('div').parent(); //选择div元素的父元素
　　$('div').children(); //选择div元素的所有子元素
　　$('div').siblings(); //选择div的同级元素
　　$('div').find('.myClass'); //选择div内的class等于myClass的元素

 

 

二、jQuery动画

1.显示和隐藏动画

show(speed, callback) hide(speed, callback) toggle(speed, callback)
speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
callback(可选):执行完动画后执行的回调函数

2. 滑入与滑出动画
slideDown(speed, callback) slideUp(speed, callback) slideToggle(speed, callback)

 

3. 淡入与淡出动画
fadeIn(speed, callback) fadeOut(speed, callback) fadeTo(speed, value, callback) fadeToggle(speed, callback)

 

4.自定义动画

animate(prop, speed, easing, callback)
其中prop--要执行动画的css属性（必选）: {name: value, name: value, ... name: value}
speed--要执行的动画时长（可选）
easing--执行动画的方式，控制速度（可选）
callback--动画执行完之后要执行的回调函数（可选）

 

5.easing参数
这个参数是用来控制动画在不同的动画点中设置动画速度，默认为swing
swing--在开头和结尾移动慢，在中间移动速度快
linear--匀速移动

 

6 动画队列问题及停止动画
动画队列
jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。
可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。

停止动画 stop(clearQueue, jumpToEnd)
clearQueue--是否清除动画队列
jumpToEnd--是否跳转到当前动画的最终效果

 

三、

 1.ajax；最简单的调用ajax的方式

<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<div id="checkResult"></div>
   
输入账号 :<input id="name" type="text"> 
   
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});

 

2.json：将JSON格式的字符串，转换为JSON对象

 

$.parseJSON()

 

3.字符转：$.trim()

4.数组操作：

$.each() ：遍历
$.unique()：去重

$.inArray()：是否存在$.inArray

 

 

四、jQuery操作属性

1 设置单个属性
attr(name, value); //参数1--需要设置的属性名 //参数2--对应的属性值

2 设置多个属性
attr({name1:value1, name2:value2...}); //参数是一个对象

3 获取属性
attr(name); //传需要获取的属性名称，返回对应的属性值

4 移除属性
removeAttr(name) //若属性不存在，返回undefined
//若无参数，不执行任何操作。只删除name

5prop方法
针对checked、selected、disabled这些单属性（boolean类型），其他同attr

 

 

五、jQuery事件

1.jQuery事件的发展历程：
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

2. 简单事件绑定
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
scroll(handler) 滚动事件
缺点：一次只能绑定一个事件

3.bind事件绑定
不推荐使用，jQuery1.7版本后被on取代

4.delegate事件绑定
理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

5. on事件绑定
jQuery1.7之后，jQuery用on统一了所有事件的处理方法

给自身绑定事件 on(types, function)
绑定事件委托 on(types, selector, data, handler)
// 1：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或自定义事件）
// 2：selector, 执行事件的后代元素（可选），如果没有后代元素，事件由自己执行。
// 3：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 4：handler，事件处理函数

事件委托的原理：(事件委托)
// 1.把事件绑定在父元素上
// 2.点击子元素，触发事件冒泡
// 3.父元素的事件响应这个事件冒泡，
// 4.响应事件冒泡的时候，可以知道到底是谁触发的这个事件
// 5.用on方法的第二个参数selector和触发事件的这个元素进行对比，如果可以匹配
// 6.就触发on方法的第三个参数 function

 

事件解绑：
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );

事件触发：
简单事件触发 //直接调用事件，如$(selector).click(); //触发click事件
trigger方法触发事件 //type要触发的事件的事件类型
triggerHandler触发 //type要触发的事件的事件类型，但是不会触发浏览器的默认行为（如获得焦点）

 

转载于:https://www.cnblogs.com/StingLon/p/9816712.html