jquery学习笔记

什么是jq

jQuery 是一个 JavaScript 库。
宗旨：Write less, do more. 写得少，做得多。
特点：1.轻量级js函数库
2.丰富的DOM选择器
3.链式表达式，更简洁
4.时间样式动画支持
5.Ajax操作支持
6.兼容
优点：1.简约API用于操作DOM（API：应用程序编程接口。无需访问源码，理解内部细节）
2.解决兼容

引用jq

想要使用jq就需要先引入jq
官网：http://jquery.com/
中文网站：https://www.jquery123.com/

1.下载到本地

2.引入网址通过CDN加载jq

jqCDN网站：https://www.bootcdn.cn/jquery/

版本区别

使用版本注意：
1.x 支持IE678，最新版本是1.12.4 (2016年5月20日)，现在只做bug维护，不再添加新功能

2.x 不支持IE678，不考虑兼容问题可以使用，最新版本2.2.4 (2016年5月20日)

3.x 不兼容IE678，只支持最新的浏览器。支持一些新技术，解决了一些bug(多用于移动端)

查看版本 $.fn.jquery

入口函数

window.onload

js：window.onload=function(...){}

$(function(){…})

jq：$(document).ready(function(){...});
$(function(){...});

jq对象和js对象

jq对象是用jq方法获取的，只能使用jq的方法
js对象是用js方法获取的，只能使用js的方法

js对象转换成jq对象：$(js对象)
jq对象转换成js对象：jq对象[0] 或 jq对象.get(0)

this和$(this)区别

this通常是一个Html 元素，例如(textbox)，textbox有text属性。可以在textbox的事件里面引用this获取元素

$(this)通常是一个JQuery对象 ，

选择器

1.基本选择器	Value
$(“#id”)	ID选择器
$(“div”)	元素选择器
$(“.classname”)	类选择器
$(“.classname,.classname1,#id1”)	组合选择器

2.层次选择器	Value
$("#id>.classname ")	子元素选择器
$("#id .classname ")	后代元素选择器
$("#id + .classname ")	紧邻下一个元素选择器
$("#id ~ .classname ")	兄弟元素选择器

3.过滤选择器	Value
$(“li:first”)	第一个li
$(“li:last”)	最后一个li
$(“li:even”)	挑选下标为偶数的li
$(“li:odd”)	挑选下标为奇数的li
$(“li:eq(4)”)	下标等于 4 的li(第五个 li 元素)
$(“li:gt(2)”)	下标大于 2 的li
$(“li:lt(2)”)	下标小于 2 的li
$(“li:not(#runoob)”)	挑选除 id=“runoob” 以外的所有li

3.2内容过滤选择器	Value
$(“div:contains(‘Runob’)”)	包含 Runob文本的元素
$(“td:empty”)	不包含子元素或者文本的空元素
$(“ul:has(li)”)	含有选择器所匹配的元素(ul下面含有li的ul)
$(“td:parent”)	含有子元素或者文本的元素

3.3过滤选择器	Value
$(“li:hidden”)	匹配所有不可见元素，或type为hidden的元素
$(“li:visible”)	匹配所有可见元素
:header $(“:header”)	所有标题元素 h1,h2
:animated $(“:animated”)	所有动画元素
:focus $(“:focus”)	当前具有焦点的元素
:contains(text) $(“:contains(‘Hello’)”)	所有包含文本 “Hello” 的元素
:has(selector) $(“div:has（p）”)	所有包含有 p 元素在其内的 div元素
:empty $(“:empty”)	所有空元素
:parent $(“:parent”)	匹配所有含有子元素或者文本的父元素。
:root $(“:root”)	文档的根元素
:lang(language) $(“p:lang(de)”)	所有 lang 属性值为 “de” 的 元素

3.4属性过滤选择器	Value
$(“div[id]”)	所有含有 id 属性的 div 元素
$(“div[id=‘123’]”)	id属性值为123的div 元素
$(“div[id!=‘123’]”)	id属性值不等于123的div 元素
$(“div[id^=‘qq’]”)	id属性值以qq开头的div 元素
$ (“div[id $=‘zz’]”)	id属性值以zz结尾的div 元素
$(“div[id*=‘bb’]”)	id属性值包含bb的div 元素
$ (“input [id] [ name $ =‘man’]”)	多属性选过滤，同时满足两个属性的条件的元素
$ (‘li[class^=“li”][class$=“4”][class*=“5”]’)	li里class名以li开头，4结尾，其中包含5的

3.5状态过滤选择器	Value
$(“input:enabled”)	匹配可用的 input
$(“input:disabled”)	匹配不可用的 input
$(“input:checked”)	匹配选中的 input
$(“option:selected”)	匹配选中的 option

4.表单选择器	Value
$(“:input”)	匹配所有 input, textarea, select 和 button 元素
$(“:text”)	所有的单行文本框，$(":text")等价于$(“[type=text]”)，推荐使用$(“input:text”)效率更高，下同
$(“:password”)	所有密码框
$(“:radio”)	所有单选按钮
$(“:checkbox”)	所有复选框
$(“:submit”)	所有提交按钮
$(“:reset”)	所有重置按钮
$(“:button”)	所有button按钮
$(“:file”)	所有文件域

结合元素选择器	Value
p.box	结合元素选择器( <p class=“box”> )
p.box1.box2	多类选择器( <p class=“box1 box2”> )

获得内容

.html() - 设置或返回所选元素的内容（包括 HTML 标记）

.text()- 设置或返回所选元素的文本内容

.val() - 设置或返回所选元素的内容（包括 HTML 标记）

获取设置属性attr()

arrt（‘href’）获取

arrt（‘href’，‘1.html’）设置

removeAttr（‘href’）移除

添加：$("#runoob").attr("href","http://www.runoob.com/jquery");
移出：$("#runoob").removeAttr("href");

attr 和 prop 的区别介绍：
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。

获取设置css

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

获取css值： $("p").css("background-color");
设置css值： $("p").css("background-color","yellow");

设置多个css值： $("p").css({"background-color":"yellow","font-size":"200%"});

节点关系

.parent() 方法返回被选元素的直接父元素

.parents() 方法返回被选元素的所有祖先元素

.children() 方法返回被选元素的所有直接子元素

.find() 返回被选元素的后代元素

.siblings() 方法 返回被选元素的所有同胞元素

.next() 方法该方法返回被选元素的下一个同胞元素，该方法只返回一个元素

.nextAll()方法 返回被选元素后面所有跟随的兄弟元素

.prev() 方法该方法返回被选元素的上一个同胞元素，该方法只返回一个元素

.prevAll()方法 返回被选元素的上面所有跟随的兄弟元素

元素大小

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（内边距+内容）。

innerHeight() 方法返回元素的高度（内边距+内容）。

outerWidth() 方法返回元素的宽度（内边距+边框+内容）。

outerWidth(true) 方法返回元素的宽度（内边距+边框+外边距+内容）。

outerHeight() 方法返回元素的高度（内边距和边框+内容）。

outerHeight(true) 方法返回元素的高度（内边距+边框+外边距+内容）。

$(window).height(); //浏览器时下窗口可视区域高度
$(document).height(); //浏览器时下窗口文档的高度
$(document.body).height();//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度包括border padding margin

位置大小

offset().left/offset().top 相对于文档的位置

返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。

获取： $(selector).offset()
设置： $(selector).offset({top:value,left:value})

position() 方法返回第一个匹配元素的位置（相对于它的父元素）。

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

返回位置： $(selector).scrollTop()
设置位置： $(selector).scrollTop(100)

scrollLeft() 方法设置或返回被选元素的水平滚动条位置。

可视区的宽高：$(window).width() / height()

是窗口大小的，会随窗口大小改变而改变

文档的宽高：$(document).height() / width()

当窗口放大缩小的时候，文档的宽高是不变的

$ (document.body).height()/width() 浏览器时下窗口文档body的高度/宽

$(document.body).outerHeight(true)/outerWidth(true) 浏览器时下窗口文档body的总高度/宽度 包括border padding margin

$(window).scroll() 滚动事件

两者在使用效果上区别不大，但所有浏览器基本都支持$(window).scroll()，但$(document).scroll()就不一定了。

$(window).scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置

DOM操作添加元素

append() - 在被选元素的结尾插入内容

$("p").append("追加文本");
 $("body").append(txt1,txt2,txt3);     //追加多个

appendTo() ----将已存在的节点移到元素内部的“最后位置”

prepend() - 在被选元素的开头插入内容

$("p").prepend("在开头追加文本");

prependTo()----将已存在的节点移到元素内部的“最前位置”

after() - 在被选元素之后插入内容

$("img").after("在后面添加文本");
 

before() - 在被选元素之前插入内容

$("img").before("在前面添加文本");

after 和append before和prepend的区别
       append/prepend 是在选择元素内部嵌入。
       after/before 是在元素外面追加。

insertAfter() - 把已存在元素插入指定元素后面

$("已存在元素").insertAfter("指定元素");
 

insertBefore() - 把已存在元素插入指定元素前面

$("已存在元素").insertBefore("指定元素");

remove() - 删除被选元素（及其子元素）

$("#div1").remove();
$("p").remove(".italic");//也可接受一个参数，允许您对被删元素进行过滤。

detach() - 删除被选元素（及其子元素）

detach() 会保留所有绑定的事件、附加的数据

empty() - 从被选元素中删除子元素

如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
如需移除元素及它的数据和事件，请使用 remove() 方法代替。

$("#div1").empty();

wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。

 $("p").wrap("<div></div>");

unwrap() 方法移出包裹在元素外面的，只移除一层

$("p").unwrap();

wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容

  $("p").wrapInner("<b></b>");

clone(true/false) 方法生成被选元素的副本，包含子节点、文本和属性。

  $("p").clone().appendTo("body");

end() 返回上一次被破坏的选择器

  $("p").next().end()...

动画animate()

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

//执行多个，是同步执行
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

队列这个执行完，才会执行下一个
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

queue() 方法显示被选元素上要执行的函数队列。

annimate不能用来变换color

		div.animate({width:300},"slow");
		div.queue(function () {
			div.css("background-color","red");  
			div.dequeue();
		});
		div.animate({height:100},"slow");

更改颜色

https://plugins.jquery.com/color/
下载插件并且引入

停止动画stop()

$(selector).stop(stopAll,goToEnd);

stop(不写参数);：停止当前激活的动画
stop(true)：按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。
stop(true,true)：停止动画，快速完成动作，并停止它。

finish()立即完成

delay（time） 延时队列中后面的项目

效果

hide() 显示

$(selector).hide(speed,callback);

//speed：可以写1000，slow

 $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });

show() 隐藏

$(selector).show(speed,callback);

toggle () 切换显示隐藏

$(selector).toggle(speed,callback);

fadeIn() 用于淡入已隐藏的元素

fadeOut() 方法用于淡出可见元素。

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);
opacity:0-1

slideDown() 方法用于向下滑动元素。

slideUp() 方法用于向上滑动元素。

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

事件

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

$(selector).on(event,childSelector,data,function)

// event	必需。规定要从被选元素添加的一个或多个事件或命名空间。
//          由空格分隔多个事件值，也可以是数组。必须是有效的事件。
//childSelector	可选。规定只能添加到指定的子元素上的事件处理程序
//data	可选。规定传递到函数的额外数据。
//function	可选。规定当事件发生时运行的函数。
也可用于事件委托绑定
$('ul).on('click',$('li'),function(){})

添加多个事件：用空格隔开

  $("#btn").on("mouseover mouseout", func);
  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
 
  });

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

 $("p").off("click");

one() 方法时，每个元素只能运行一次事件处理程序函数。

$(selector).one(event,data,function)

event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下。

$("input").keydown(function(event){
    $("div").html("Key: " + event.which);
});

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

$(selector).hover(inFunction,outFunction)
相当于调用mouseenter 和 mouseleave 事件

event.pageX/Y 属性返回鼠标指针的位置，相对于文档的边缘。

$(document).mousemove(function(event){
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});

event.clientX/Y 鼠标相对于浏览器窗口可视区域的坐标（不包括工具栏和滚动条）

event.screenX/Y 鼠标相对于屏幕的坐标

取消冒泡

1.e.stopPropagation()
2.return false;

1.e.cancelBubble=true

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
　　// 因此它支持W3C的stopPropagation()方法
　　e.stopPropagation();
else
　　//否则，我们需要使用IE的方式来取消事件冒泡
　　window.event.cancelBubble = true;
return false;

取消事件默认行为

1.e.preventDefault() 
2.return false 

循环each（）

$(selector).each(function(index,element){})
index - 选择器的 index 位置。
element - 当前的元素（也可使用 "this" 选择器）。

$.each( object, callback )
可以用于多种数据的循环（json，对象，数组）
  $.each([52, 97], function(index, value) {
        alert(index + ': ' + value);
    });

退出循环
return false=break;
return false=continue

函数声明

$.fn.my=function(a){
	console.log(this)
}
$().my('123')

ajax

 $(function(){
        //请求参数
        var list = {};
        $.ajax({           
            type : "POST",//请求方式
            async:true,//是否异步请求        
            cache:true,//开启缓存 缓存问题用随机数/时间解决。Math.random()/new Date().getTime()
            contentType: "application/x-www-form-urlencoded",   //请求的媒体类型           
                         //默认是："application/json;charset=UTF-8"
            url : "http://127.0.0.1/admin/list/", //请求地址
            //数据，json字符串
            data : JSON.stringify(list),          
            success : function(result){//请求成功
                console.log(result);//已经转换成对象了
			},
            error : function(e){  //请求失败，包含具体的错误信息
                console.log(e.status);
                console.log(e.responseText);
            },
            beforeSend:function(){},//ajax请求之前执行
            complete:function(){ },//Ajax请求完成后执行
        });
    });

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

 $.getJSON("demo_ajax_json.js",function(result){  });

getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

$.getScript("demo_ajax_script.js");//按需要加载，当需要执行某个效果的时候再加载

beforeSend(xhr) 发送请求前运行的函数。

complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

async 布尔值，表示请求是否异步处理。默认是 true。

表单序列化：

              $('form').serialize() 

               转化成：'username=user&password=123456'
              
              $('form').serializeArray()

               转化成：{
                       username:user,
                       password:123456
                     } 

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

$(selector).load(url,data,function(response,status,xhr))
url:地址
data:请求数据

链式

链式调用的原理就是实例在调用内部方法的时候，返回当前调用这个方法的实例对象this就可以了，因为返回了当前的this就可以继续访问自己的原型了

$("div").width("100px").height("100px");

使用js模拟

let fun = {
    fun1: function() {
        console.log("fun1");
        return this;
    },
 
    fun2: function() {
        console.log("fun2");
        return this;
    },
 
    fun3: function() {
        console.log("fun3");
        return this;
    }
}
 
fun.fun1().fun2().fun3();

为什么后面加return this，如果没有加上return this语句的话，那么执行完一个函数之后，会默认返回undefined，
…一个对象里面，this指向的是对象本身，而我们连续调用方法的时候，这些方法都是在对象内部定义的，所以this是可以访问到这些方法。

jquery UI

jQuery UI 主要分为3个部分：交互、微件和效果库

如何引入

比如选择自己想要的插件
1.引入jq
2.引入jqueryUI.js
3.引入jqueryUI.css
4.引入当前css样式
（可以直接复制链接在页面中打开，然后复制页面内容到自己创建的文件，在引入进去）
5.把所需要的js，html复制到自己的代码里面

更改网页样式

找到要更改的样式复制所有class名，中间用( . )隔开，没有空格

.ui-state-default.ui-corner-all{

}