jq学习笔记

jq2.0以上的版本不兼容IE8及已下的版本的浏览器

jq的使用


    

ready和onload事件的区别

  • ready表示页面中dom加载完毕后触发
  • onload表示页面中的一切加载完才触发(dom元素,图片...)

特点

  • 轻量 开源 免费 兼容性处理
  • 强大的选择器
  • 便捷的dom操作
  • 链式调用
  • 可靠的事件机制
  • 封装了简单易用的ajax操作
  • 丰富的插件

jquery dom对象

  • 使用jq选择器获取的不是原生dom对象,称之为jquery dom对象
  • jqdom对象本质上是由原生dom对象组成的集合
  • 原生dom转jqdom $(原生dom)
  • jqdom转原生dom jqdom[0]

全局对象

  • jQuery $
  • $的参数如果是原生dom对象,把该对象转为jqdom
  • $的参数如果是字符串,为jq的选择器
  • $的参数如果是字符串,并且以<开头,创建一个新的元素

jq选择器

1.基本选择器

  • //id选择器
    $('#firstList').css('border','2px solid red');
  • //class
    $('.item').css('border','1px solid green');
  • //标签
    $('li')
  • //全局
    $('*')
  • //组合
    $('li.item').css('background-color','yellow');
  • //多个选择器
    $('li,p').css('width','200px');

2.层级选择器

  • 选择器 选择器 后代元素(所有层级)
  • 选择器>选择器 后代子元素(第一层级)
  • 选择器+选择器 紧邻的兄弟元素(必须是同一个父元素)
  • 选择器1~选择器2 匹配选择器 1之后的所有的同辈的选择器2的元素

3.筛选选择器

  • :first
  • :last
  • :eq(index) 指定index
  • :gt(index) 大于
  • :lt(index) 小于
  • :odd 奇数
  • :even 偶数
  • :not(选择器) 排除
  • :lang(语言)
  • :header h1-h6的标签
  • :focus 获取焦点的元素
  • :root 获取根元素(html)
  • :target 获取锚点指向的元素(url #元素)

4.内容选择器

  • :contains(text) 包含指定的文本的元素
  • :has(选择器) 包含满足条件的元素的父元素
  • :empty 没有内容没有文本的元素
  • :parent 和empty相反

5.可见性选择器

  • :hidden 不可见的元素
  • :visible 可见的元素

6.属性选择器

  • [attrName] 有指定属性的元素
  • [attrName=value] 有指定属性值的元素
  • [attrName!=value] 有指定属性不等于指定值的元素
  • [attrName^=value] 有指定属性以指定值开头的元素
  • [attrName$=value] 有指定属性以指定值结尾的元素
  • [attrName*=value] 有指定属性包含指定值的元素
  • [selector1][selector1][selector1] 符合属性选择器,需要同时满足多个条件

7.子元素选择器

  • :first-child 是所有兄弟元素里面的第一个
  • :last-child 是所有兄弟元素里面的最后一个
  • :nth-child(index) index从1开始 所有兄弟元素的正数第几个
  • :nth-last-child(index) index从1开始 所有兄弟元素的倒数第几个
  • :only-child 唯一的子元素,没有兄弟元素
  • :first-of-type 所有兄弟元素里面同标签的第一个
  • :last-of-type 所有兄弟元素里面同标签的最后一个
  • :nth-of-type(index) 所有兄弟元素里面同标签的正数第几个
  • :nth-last-of-type(index) 所有兄弟元素里面同标签的倒数第几个
  • :only-of-type 唯一的子元素(同标签),没有兄弟元素

8.表单选择器

  • :input 所有的表单组件(input textarea select radio...)
  • :text / :password / :radio / :checkbox / :file /:reset 根据input的type值取
  • :submit 所有具有提交功能的按钮 button input:submit
  • :button 所有的button元素以及input:button的元素

9.表单对象选择器

  • :disabled 选中有disable属性的元素
  • :enabled disabled的反义词
  • :checked 选中有checked属性的元素
  • :selected 选中有selected属性的元素,比如select的option

10.混淆选择器

  • ('#'+$.escapeSelector('#item'))

jq属性操作

1.属性

  • .attr(attrName) 操作所有的属性(自定义和内置的) 一个参数是获取 两个参数是修改或者新增
  • .prop() 操作html内置的属性 一个参数是获取 两个参数是修改或者新增
  • .removeAttr(attrName) 可删除所有属性
  • .removeProp(attrName) 并不能删除内置属性
  • 注意: 若选中的是元素集合,设置可全部都生效,若获取,只能获取到第一个元素.

2.css类

  • .addClass() 添加一个class值
  • .removeClass() 删除一个class值
  • .toggleClass() 切换一个class值
  • .hasClass() 判断是否有某个class值 返回true/false

3.html代码/文本/值

  • .html() 一个参数获取,两个参数设置.设置或获取 html代码 innerHTML
  • .text() 一个参数获取,两个参数设置.设置或获取文本 innerText
  • .val() 无参数是获取 一个参数是设置 表单控件的值

jq样式操作

1.css操作

  • .css() 获取或者设置css属性 也可以直接传对象
console.log($('#box').css('border'));
$('#box').css('width','500px');
$('#box').css({
                'width':'400px',
                'height':'100px'
            });

2.位置

  • .offset 设置/获取 元素在页面中的坐标
console.log($('.box').offset());
$('.box').offset({left:100,top:100})
  • .position 元素在第一个定位的祖先元素内坐标(只读)
  • .scrollTop 获取/设置 相对滚动条顶部的偏移
  • .scrollLeft 获取/设置 相对滚动条左部的偏移

3.尺寸

  • .width() height() 获取/设置 元素内容的尺寸
  • .innerWidth() innerHeight() 获取/设置 内容尺寸+padding
  • .outerWidth() outerHeight() 获取/设置 盒子的尺寸 内容+padding+border+margin

jq筛选操作

1.过滤操作

  • .first()
  • .last()
  • .eq(index|-index) 0,1..-2,-1
  • .not(expr|ele|fn) 去除指定元素 expr一个选择器字符串 ele一个dom元素 fn回调函数
  • .filter(fn(index){return...}) 只要满足条件的元素
  • .slice(index,index) 截取指定索引的元素 index,index-1 从0开始数
  • .has() 获取有指定子元素的父元素 $('li').has('ul')含有ul的li
  • .hasClass(class)

2.查找

  • .children(可选参数selector) 可选参数 获取子元素
  • .find(selector) 获取后代元素
  • .parent(可选参数selector) 获取父元素
  • .parents(可选参数selector) 获取所有的祖先元素
  • .parentsUntil(可选参数selector) 查找当前元素的所有父辈元素,直到遇到匹配的元素为止
  • .offsetParent() 获取第一个定位的祖先元素
  • .next(可选参数selector) 紧邻在后面的兄弟元素
  • .nextAll(可选参数selector) 后面所有的兄弟元素
  • .nextUntil(可选参数selector) 后面的所有的兄弟元素直到遇到匹配的元素为止
  • .prev(可选参数selector) 紧邻在前面的兄弟元素
  • .prevAll(可选参数selector) 前面所有的兄弟元素
  • .prevUntil(可选参数selector) 前面的所有的兄弟元素直到遇到匹配的元素为止
  • .siblings(可选参数selector) 所有的兄弟元素
  • .closest(selector) 从所有的祖先元素和自己本身合集中找出第一个满足条件的元素

3.串联

  • .add(selector) 将匹配的元素添加到jq对象中,组成新的jq对象
  • .addBack() 把调用该方法的元素加入到当前集合中
  • .end() 返回最后一次破坏性操作之前的dom
  • .contents() 返回所有子节点的集合

4.jq dom对象操作

  • .each() 遍历
  • .map() 遍历并根据return值返回新的集合
  • .length 集合中元素的数量
  • .index() 返回某个元素在父元素中的索引
  • .get(可选index) 参数一个返回集合中指定索引 参数为空可以把jqdom转化称纯数组
  • .is(selector) 判断该jsdom是否满足某个条件 返回布尔值

jq dom操作

1.创建元素

  • $('')

2.内部插入

  • .append(内容) 匹配的元素内部追加内容
$("p").append("Hello");
  • .appendTo(selector) 把匹配的元素追加到另一个指定的元素集合中
$("p").appendTo("div");
  • .prepend(内容) 匹配的元素内部前置内容
  • .prependTo(selector) 把匹配的元素前置到另一个指定的元素集合中

3.外部插入

  • .after(内容) 在匹配的元素之后插入内容
$("p").after("Hello");
  • .before(内容) 在匹配的元素之前插入内容
$("p").before("Hello");
  • .insertAfter(selector) 把匹配的元素插入到另一个指定的元素集合的后面
  • .insertBefore(selector) 把匹配的元素插入到另一个指定的元素集合的前面

4.包裹

  • .wrap() 元素.warp(标签) 用标签包裹元素,为每一个匹配的元素都包裹一次
  • .wrapAll() 元素.wrapAll(标签) 所有的元素都被一个标签包裹,将所有的匹配元素用单个标签包裹起来
  • .wrapInner() 元素.wrapInner(标签) 用标签包裹元素内部,将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
  • .unwrap() 去除包裹

5.替换

  • .replaceWith(元素/dom) 将元素替换成指定的html或者dom元素
  • .replaceAll(selector) 用匹配的元素替换掉所有selecor匹配到的元素

6.删除

  • .empty() 删除匹配的元素集合中所有的子节点
  • .remove() 不传参数删除元素本身 传参数删除匹配的元素
  • .decath() 于remove的效果一样,但是删除的元素所有绑定的事件和附加数据都会保留下来,remove则不会

7.克隆

  • .clone() 克隆元素

jq事件

1.事件绑定

  • .event 直接调用事件名
  • .on(event,fn) 标准的绑定方式
  • .on({event:fn,...}) 同时绑定多个事件
  • .one(event,fn) 只绑定一次事件

2.解除事件绑定

  • .off(可选参数事件名) 不传则解除全部事件,传参则解除对应的事件

3.事件委派

  • .on(event,selector,fn)

4.控制事件触发

  • .trigger(参数事件名)
  • .triggerHandle(参数事件名)
$('#btn').trigger('click')

区别:

  1. trigger 返回的jqdom对象,所以可以连贯操作;
  2. triggerHandler 无法触发元素自带的事件 如focus,blur等
  3. trigger会触发集合中所有元素的事件,triggerHandler只会触发集合中的第一个元素

5.事件列表

  • .ready 页面中dom加载完毕
  • .focusin 获取焦点,绑定给父元素
  • .focusout 获取焦点,绑定给父元素
  • .mouseenter 代替mouseover 鼠标悬停在元素上
  • .mouseleave 代替mouseout 鼠标离开元素
  • .hover mouseenter和mouseleave的集合

6.事件对象

  • event对象
  • event.pageX 鼠标箭头的x坐标
  • event.pageY 鼠标箭头的y坐标
  • event.target 当前触发的元素对象
  • event.which 键盘的ascii码
  • event.type 事件类型(名称)
  • event.preventDefault() 阻止默认操作
  • event.stopPropagation() 阻止事件冒泡

jq动画

1.基本效果

  • .hide(可选速度参数,可选回调参数) 隐藏
  • .show(可选速度参数,可选回调参数) 显示
  • .toggle(可选速度参数,可选回调参数) 切换显示和隐藏
  • fast/normal/slow/数字 第二个参数是回调事件
  • 动画的css属性变化:透明度变化,元素大小相关的样式(padding,border,width,height,margin)

2.滑动效果

  • .slideDown() 显示
  • .slideUp() 隐藏
  • .slideToggle() 切换
  • fast/normal/slow/数字 第二个参数是回调事件
  • 垂直方向上的变化 height/padding-top/margin-top

3.淡入淡出效果

  • .fadeIn() 淡入
  • .fadeOut() 淡出
  • .fadeToggle() 切换
  • .fast/normal/slow/数字 第二个参数是回调事件
  • .fadeTo(时间,透明度,回调) 改变透明状态
  • 透明度的渐变

4.自定义动画

  • .animate({},speed,fn) 自定义动画

$('#box').animate({
    width:'200px',
    padding: '5px',
    'border-radius':'20px'
},3000)

$('#box').animate({
    width:'toggle',
    padding: 'toggle',
    'border-radius':'toggle'
},1000)

  • .stop() 使动画暂停
  • .finish() 使动画完成
  • .delay() 延迟执行动画

5.动画设置

  • jQuery.fx.off=true/false 关闭页面上所有的动画
  • jQuery.fx.interval = 100; 设置动画的显示帧速

6.动画队列

  • 所有的动画操作会加入到队列中,依次执行,其他的不会

7.jq动画于css动画

  • 兼容性,css3的动画需要ie9+
  • css3的动画必须给元素指定具体的css属性值

jq ajax

1.快速请求方法

  • get(url,[data],[callback],[type])
  • url:待载入页面的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
  • type:返回内容格式,xml, html, script, json, text, _default。
$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
});
  • post(url,[data],[callback],[type])
  • url:待载入页面的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
  • type:返回内容格式,xml, html, script, json, text, _default。
$.post("test.php", { "func": "getNameAndTime" },
          function(data){
          alert(data.name); // John
          console.log(data.time); //  2pm
          }, "json");

2.ajax方法

  • ajax()
$.ajax({
        type: "get",        // 请求方式
        url: "js/data.txt", // 请求路径
        dataType: "json",   // 预期返回一个 json 类型数据
        success: function (data) {   // data是形参名,代表返回的数据
            console.log(data);
        }
    });
————————————————
$.ajax({
        url:"ajaxServlet1111" , // 请求路径
        type:"POST" , //请求方式
        //data: "username=jack&age=23",//请求数
        data:{"username":"jack","age":23},
        
        success:function (data) {
            alert(data);
        },//响应成功后的回调函数
        error:function () {
            alert("出错啦...")
        },//表示如果请求响应出现错误,会执行的回调函数
        dataType:"text"//设置接受到的响应数据的格式
        });
————————————————

3.表单方法

  • serialize() 把表单中有name属性的表单控件的值拼接成字符串

jq 工具方法

1.数组对象方法

  • $.each(Array,fn(index,item)) 用于遍历数组或类数组对象
  • $.grep(Array,fn(item,index)) 过滤数组 返回过滤后的数组
  • $.map(Array,fn(item,index)) 通过回调函数的return组成新的数组并返回
  • $.makeArray(类数组对象) 类数组对象转换成纯数组
  • $.inArray(某个元素,Array) 判断一个元素在数组中的位置,不存在返回-1
  • $.merge(Array,Array1,...) 合并数组 返回新数组
  • toArray(jqdom) jqdom方法,把jqdom转为纯数组

2.函数方法

  • $.proxy(fn,newObj) 改变函数的this指向

3.类型判断

  • $.type(val) 判断val的类型
  • $.isFunction(val) 判读val是否为函数
  • $.isEmptyObject({...}) 判断是否是空对象
  • $.isPlainObject({...}) 判断是否是纯对象
  • $.isWindow(val) 判断是否是window对象
  • $.isNumeric(val) 判断是否是数字(NaN为false)

4.字符串

  • $.trim(str) 去除两边的空格
  • $.param(obj) 把对象序列化成字符串 {a:1,b:2}-->a=1&b=2

5.版本

  • $.fn.jquery 返回jq的版本

jq 插件

1.jq插件的网址

  • http://plugins.jquery.com/ 官网
  • http://www.jq22.com/ jQuery插件库
  • http://www.htmleaf.com/ jQuery之家
  • http://www.jq-school.com/ jQuery-school

2.经典jq插件

  1. select2 下拉框搜索插件
  • 官网 https://select2.org/
  • github https://github.com/select2/select2
  1. datetimepicker 时间日期插件
  • github https://github.com/xdan/datetimepicker
  • 文档 https://xdsoft.net/jqplugins/datetimepicker/
  1. fullpage 全屏滚动插件
  • 官网 https://alvarotrigo.com/fullPage/zh/
  • github https://github.com/alvarotrigo/fullpage.js/
  1. lazyload 图片懒加载
  • 官网 https://appelsiini.net/projects/lazyload/
  • github https://github.com/tuupola/jquery_lazyload/tree/2.x
  1. layer 弹窗插件
  • 官网 http://layer.layui.com/?alone
  • github https://github.com/sentsin/layer/
  1. nice validator 表单验证
  • 官网 https://validator.niceue.com/
  • github https://github.com/niceue/nice-validator
  1. jQuery-easing
  • 官网 http://gsgd.co.uk/sandbox/jquery/easing/
  • github https://github.com/gdsmith/jquery.easing

jq 自定义插件

  • jQuery.fn.extend() 给jQueryDom扩展方法
//定义插件
$.fn.scrollList=function(options){...}
//调用插件
$('#wrapList').scrollList({...})

//给jqdom对象扩展方法
$.fn.extend({
    changeRed:function(){
        $(this).css('color','red');
    }
})
  • jQuery.extend() 给jQuery 对象本身扩展方法
//给jq对象本身 扩展方法
$.extend({
    sayHello:function(name){
        console.log('hello; ',name);
    }
})

jQuery UI

  • 官网 https://jqueryui.com/

jQueryMobile

  • 官网 https://jquerymobile.com/
  • 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

Sizzle

  • 官网 https://sizzlejs.com/

Zepto

  • 官网 http://zeptojs.com/
  • 与jquery区别: https://www.zhihu.com/question/25379207

原理

  • jq本质是一个闭包 (立即执行函数)
  • 为了避免多个框架的冲突
  • jq如何让外部访问内部定义的局部变量
  • window.JQuery=window.$=JQuery
  • jq为什么要给自己传递window参数
  • 为了方便后期压缩代码;为了提升查找的效率
  • jq为什么要给自己传递undefined参数
  • 为了后期压缩代码
  • ie9以下的浏览器undefined可以被修改,为了保证内部使用的und不被修改,所以需要接收一个正确的und
    $()
  1. 传入‘’ null undefined NaN 0 faLse,返回空的jq对象
  2. 传入字符串:
    1. 代码片段:会将创建好的dom元素存储到jq对象中返回
    2. 选择器:会将找到的所有元素存储到jq对象中返回
  3. 传入数组:会将数组中存储的元素依次存储到jq对象中返回
  4. 其他:会将传入的数据存储到jq对象中返回
(function(w,undefined){
//工厂
function jQuery(selector,context){
    return new jQuery.fn.init(selector,context)
}
//给原型提供一个简写方式
jQuery.fn=jQuery.prototype={
    constructor: jQuery,
    length:0,
    toArray:function(){return slice.call(this)},
    each:function(){},
    map...
};
//init才是真正的构造函数
var init=jQuery.fn.init=function(selector,context){
...
};
//把构造函数的原型,替换成jq工厂的原型
//这么做是为了实现jq的插件机制,让外界可以通过jq方便的进行扩展
init.prototype=jQuery.fn;
w.jQuery=w.$=jQuery;
})(window)

你可能感兴趣的:(jq学习笔记)