JQuery自学笔记

2019-11-11 技术收录前端框架 0 评论字数统计:5549字阅读时长:12分

简介

Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

下载

JQuery官网

min.js：压缩版发布版

.js:常规版开发板

开始使用

$(document).ready(function(){}): 初始化函数，当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后立刻执行

onload:javascript,初始化函数，当网页中的dom元素(关联图片、视频、资源)全部加载完毕后立刻执行

jquery初始化函数简化:

$ (function() {...}) ;

$ 等价于jQuery

dom模型:

将html xml 等文档结构的标签语言看成dom模型

dom节点有三种类型:

元素节点<html> <ul>... <p>
属性节点: title Src alt
文本节点:文本节点

Dom对象:

以上三种节点类型的具体对象就是Dom对象。

使用层面:

凡是JavaSCript 能够直接操作的对象，就是Dom对象。

例如，var title = document. getElementById(' myTitile") ;通过js获取到的title对象就是一个dom 对象(就是<p>对象)

jQuery对象:

凡是jQuery能够直接操作的对象，就是jQuery对象。

例如: var $title = $(" #myTitile") ;通过jquery获取到的$title就是一个jquery对象。

同样一个元素，既可以成为个dom对象 (javascript对象) ，也可以成为一个jquery对象

注意: dom对象只适用于js的各种语法(函数、属性)，jquery对象只用于jquery的各种语法(函数、属性)。dom对象和jquery对象的各自独立。

例如

title是dom对象，因此可以使用js属性或方法title. innerHTML
$title是jquery对象，因此可以使用jquery属性或方法$title.html ()

建议:

js对象直接写title
jQuery对象加上$title

dom对象和jQuery对象的转换

    title.innerHTML:
        title->$title
    $title.html():
        $title->title

dom-jQuery:jquery工厂，$(dom对象).jQuery方法

jQuery-Dom:

基础：jquery对象默认是一个数组或集合；dom对象默认是一个单独对象
数组：jQuery对象[0]； jQuery对象(含有$)
集合：jQuery对象.get(0);

jQuery选择器：jQuery根基

分类：

基本选择器：

标签选择器：    $("标签名")

类选择器：   $(".class值")

id选择器:       $("#id值")

全局选择器：     $("*")

并集选择器:","  $("#id值,.class值")

交集选择器（同时存在）：直接写$("p.class值")  无需","  既是p标签的值又是clss的值

    错误$(".class值p")   交集选择器在交接处只能是.或#

层次选择器: 只取后面的那个

相邻选择器       +  
    $("#b+li") id为b的相邻的标签为li的元素
    $("选择器1+选择器2")

同辈选择器       ~

    $("选择器1~选择器2")

后代选择器：    空格

    $("选择器1 选择器2")

子代选择器：       >

    $("选择器1>选择器2")

属性选择器 [….]

$("[属性名]")

    $("[name]")     选中全部元素中含有name属性的元素

$("[属性名=属性值]") 

    $("[class=xxx") 等价    $("[class='xxx']")    

$("[属性名^=a]")    属性名以a开头的元素 

$("[属性名$=a]")   属性名含有a的元素  判断属性值的操作

$("[属性名*=a]")   属性名以a开头的元素

$("[属性名!=a]")    属性名不等于a开头的元素 有属性名但属性值不等于属性值  没有属性名

过滤选择器 “:” 和其他的一些方法类似

    first()  last() 

有些不行

    :odd  

基本过滤选择器      从0开始     0是偶数

    :first         最开头的那一个

    :last-child    最后哪一个

    :even           偶数  

    :odd            奇数

    :eq(index)      第index个   jQuery对象是一个数组0 1 2 3   

    :gt(index)      >index的全部元  index就相当于下标

    :lt(index)      <index的全部元素 

    :not(index) 除了index以外的全部

    :header:        选中所有的标题元素 h1  h2 h3

    :focus:     中当前焦点的元素

例

$("ul>li:first").length     

$("ul>li").first().length

 对象.过滤器();   对象:first

有些是可以通用的

注意

    $("ul>li:odd")[0].html()   是错误的

原因：

$("ul>li:odd")[0]是dom对象   不能使用jQuery方法

解决办法

$($("ul>li:odd")[0]).html()
    将dom对象转换为jQuery对象

可见性选择器

:visible:选中所有可见的元素

:hidden:选中所有隐藏的元素

通过css()来设置样式

$("input:focus").css            
$(":header").css("key","value");   
                background  red;

事件

js:on~ onclick() 写在script内 ready()外
jQuery:没有on click() 写在ready()内

语法：

$(选择器).事件类型(function (){

});

windows事件:

ready();

鼠标事件：

click（）:点击事件

mouseover():鼠标悬浮

mouseout():鼠标离开

jQuery执行完毕后返回对象本身

因此

$("div").mouseover(function(){
    alert("111");

});
$("div").mouseout(function(){
    alert("2222");

});

等价于链式写法

$("div").mouseover(function(){
    alert("111");

}).mouseout(function(){
    alert("2222");

});

键盘事件

event.keyCode拿到键码值

keydown():  从上往下压过程

keypress(): 压到底了

keyup():    从下往上

注意：前端的一些事件、方法会在某些情况下失效。考虑兼容性。

表单事件

    focus(方法):获取焦点

    blur(方法):失去焦点

注意：

当颜色两两相同时六位十六进制的颜色可以写成3位
可以使用this代表当前对象但是this是dom对象因此需要转换为jQuery对象$(this)

绑定事件和移除事件

$(...).bind(事件类型,[数据],函数);   数据可选参数
$(...).bind("click",function(){
});

批量绑定

    $(...).bind({"事件名"：函数，"事件名"：函数})

移除事件：

$(...).unbind(事件类型,[数据],函数);数据可选参数
$(...).unbind("click");

复合事件：

hover(f1,f2); 切换使用  mouseover   mouseout

toggle(f1,f2,f3,.....fn):   具有版本问题（只支持1.9之前的） 轮回执行多个click()事件

toggle()其他含义（隐藏和显示）

显示效果（隐藏与显示）

hide([速度],[回调函数])：隐藏

hide()：立刻隐藏   hide(3000)三秒隐藏

show()：显示

toggle()：两者切换

注意

回调函数（callBack）当函数执行完毕后在执行回调函数
速度：毫秒或者关键字”fast” “slow” “normal”

淡入淡出：改变透明度来隐藏

fadeIn():淡入   显示

fadeOut():淡出    隐藏

控制高度

slideDown():变大  下拉

slideUp()：变小  上拉

总结显示问题

显示：show(),fadeIn(),slideDown()

隐藏：hide(),fadeOut(),slideUp()

操作Dom：

样式操作

设置css

jQuery对象.css("属性名","属性值")操作一个、

jQuery对象.css({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})操作多个

追加或移除样式class

addClass("x")           一个

addClass("x x x")       多个以空格隔开    一组双引号

removeClass("x");       移除一个

removeClass("x x");     移除多个

removeClass()：         移除全部样式

toggleClass();          切换追加与移除

内容操作

    对象.方法

    html():         获取值，获取的是元素的内容  包括元素内部的各种标签

    html(zxzz)      赋值

    text():         获取值，只获取文本值

    text(xxxx)      赋值  

    val():          获取value值

    val(xxxx):      设置value值

节点与属性的操作

节点操作

查询节点：

jquery选择器

创建节点：$()

$(选择器)：         获取节点

$(DOM对象):         转换

$(html字符串)     创建节点$("<li>xxxx</li>")

内部插入

先创建 var $aaaa = $("<h1>hello</h1>");

$(A).append(B)              将B追加到A中     后面
如: $("").append($aaaa);

$(A).appendTo(B)            把A追加到B中
如: $aaaa.appendTo("");

$(A). prepend (B)           将B前置插入到A中    前面
如: $(""). prepend ($node);

$(A). prependTo(B)          将A前置插入到B中
如: $ node.prependTo ("ul!");

外部插入

$(A).after(B)           将B插入到A之后
如: $("u").after(Snode);

S(A).insertAfter(B)     将A插入到B之后
如: $ node.insertAfer("l");

$(A).before(B)          将B插入至A之前
如: $("u").before(Snode);

S(A).insertBefore(B)    将 A插入到B之前
如: $ node.insertBefore("ul");

替换节点

$x.replaceWith(b)   用b替换a
$b.replaceAll(x)    用b体寒a

删除节点

remove():   彻底删除
deatch()：  只将节点删除  但关联的事件  数据不会删除（不推荐删除）
empty()：   只删除内容

克隆节点

clone(true|false);   连事件 是否克隆

属性操作

attr("属性名")：                获取属性值

attr("属性名","属性值")：       设置属性值

attr({"属性名"："属性值","属性名"："属性值",})  设置多个值

removeAttr("属性名");           删除

val():                          获取value值

val(xxxx):                      设置value值

获取集合与遍历

$("")   本身就是一个集合

节点集合

$(...).childern("标签")
    标签为空  则选择所有节点

后代集合不推荐

$(...).find("标签");

这种也可以

后代选择器：空格
$("选择器1 选择器2")

子代选择器：>
$("选择器1>选择器2")

同辈集合

()里面可以加标签

next()  :       后一个     +

prev():         前一个     无

siblings()：    同辈   都有   不包含自己

前辈集合

()里面可以加标签

parent():       父代

parents():      祖先节点

过滤集合

很多方法的()就是一个过滤选择器

filter("选择器")

遍历集合

$(....).each(function(){  
}); 

$(....).each(function(index,element){

});

index:当前第几个元素
element：当前的元素是谁相当与this但是this和element都是dom对象需要转换为jQuery对象$(this) $(element)

CSS-dom操作：

（）取值 (xxxx)设置值xxxx是数字不要加px

height()              高

width()               宽

offset()             偏移量（左上角）   结果是一个对象     
    .left
    .top

例

offset(function(index,oldOffset){//通过方法来赋值
    //定义对象
    var newOffset = new Object();
    //赋值
    newOffset.left = oldOffset.left+100;
    newOffset.top=oldOffset.top+100;
    //返回结果
    return newOffsetp;
})

index；第几个
oldOffset；当前元素
offsetParent()：获取已定位的最近的父元素结果是节点而不是位置

定位：

元素的position的属性(默认为static)被设置为relative(相对) absolute（绝对）或dixed

scrollLet() 滚动条 

scrollTop ()

表单校验

可以减轻对服务端的访问次数

获取要校验的元素值(选择器)
通过字符串处理方法、或者正则表达式等手段进行验证

触发校验的方法或事件

blur():失去焦点时触发

submit():当点击表单的提交按键时

js方法

onblur="xxxx()"
onsubmit="xxxx()"

正则表达式：用于定义规则

/.../   一个 规则的开始和结束

^       匹配字 符串的开始

$       匹配字符串的结束

[]      定义一个匹配的字符范围，如[0-9a-z]表示 该字符取值的范围是数字或小写字母

\s      任何空白字符

\S      任何非空白字符

\d      匹配一个数字字符，等价于[0-9]

\D      除了数字之外的任何字符，等价于[^0-9]   

^       非  除了

\w      匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_ ]    或直接写  范围-

\W      任何非单字字符，等价于[^a-ZA-Z0-9_ ]

.       除了换行符之外的任意字符

{n}     匹配前一项n次

{n,}    匹配前项n次或n次以上

{n,m}   匹配前一项至少n次，至多m次

*       匹配前一项0 次或多次，等价于{0,}

+       匹配前一项1次或多次，等价于{1,}

?       匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

实例

$("#utel") .blur ( function() {
    var $tel = $(this) . val () ;
    var reg= /^1\d{10}$/ ;
    if(! (reg. test ($tel))) {
    if($tel=""||$tel. length==0)
        {
            $("#telTip") .css ("display","none ");
        }else{
            $("#telTip") .css ("display","inline") ;//inline不换行   block回车换行
        }
    }else{
        $("#telTip") .css ("display","none ");
    }
}) ;
$ ("#uemail") .blur(function() {
    var $email = $ (this) . val () ;
    var reg = /^\w+@[0-9a-zA-Z]{2,4}\.[a-zA-Z]{2,3}([a-zA-Z] {2,3})?$/;
    if( ! reg. test ($email) )
        if($email=""||$email. length==0)
        {
            $ (" #emailTip") .css ("emailTip" , "none");
        }else{
            $("#telTip") .css ("display", "inline") ;
        }
    }else{
        $ (" #emailTip") .css ("emailTip" , "none");
    }
}) ;

表单选择器（过滤选择器）

:input          匹配所有input、textarea select和button元素
$(" #myfom :input")选 取所有的input、select、  button元素

:text           匹配所有单行文本框
$("#myfom :text" )选取所有的<input type=" text"/>元素

:password       匹配所有密码框
$(" #myform :password" )选取所有<inputtype="password" />元素

:radio          匹配所有单项按钮
$(" #myfom :radio")选 取所有<input type="radio"/>元素

:checkbox       匹配所有复选框
$(" #myform:checkbox”)选取<input type="checkbox”/>元素

:submit         匹配所有提交按钮
$(" tmyfom :submit ”)选取<input type="submit”/>元素

:image          匹配所有图像
S$("#myform :image" )选取<input type=" image" />
元素

:reset          匹配所有重置按钮
$(" #myform:reset”)选取<input type=" reset”/>元素

:button         匹配所有按钮
$(" #myfom :button" )选取button元素

:file           匹配所有文件域
$(" #myform :file" )选取<input type=" file”1>元素

:hidden         匹配所有不可见元素
$(" tmyform :hidden" )选取<input type="hidden”/>、style="display: none"等元素

函数

对象.stop(true,true).事件;立即执行该事件.

本文链接: https://mumulx.github.io/2019/11/jquery%E8%87%AA%E5%AD%A6%E7%AC%94%E8%AE%B0/

License：CC BY 4.0 CN

木木就是两个木木木

愿生活不太拥挤，愿笑容不必刻意。