【图文解析 】JQuery图文解释，通俗易懂，小白快来瞅瞅的。。赶紧的！

1. 正则表达式

• 声明

var regex = new RegExp(partten);

var regex2 = /^匹配规则$/;

  /../:模式符号

  ^:匹配开始

 $:匹配结束

 \d:数字[0-9]

 \w:字母数字下划线[0-9A-Za-z_]

  .:除换行外所有字符

 {m}:出现m次

 {m,n}:出现最少m,最多n

 {m,}:最少出现m次

 +: 1-

*: 0-

?: 0-1

• 匹配

test()

var str = "13867656764";

           var regex = /^1[3-9]\d{9}$/;

          

      

           str = "add@163.com";

           regex = /^\w+@[a-zA-Z0-9]{2,}\.[a-zA-Z]{2,3}$/;

          

          

           str = "你好";

           regex = /^[\u4e00-\u9fa5]+$/;

           console.log(regex.test(str));

2. 什么是jQuery

• Jquery就是js的函数库。
• Query是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
• 优点

js封装,简化

兼容性

3.jQuery的安装

• 安装方式:

下载: http://jquery.com/download/

          压缩生产环境:   .min.js

     未压缩开发环境:   .js

<script type="text/javascript" src="js/jquery.js" ></script>

• cdn(内容分发网络)

    

     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>

4.基本语法

$(selector).action();

$:核心 jQuery简写形式$

selector:选择器   (jQuery对象)

action():操作

5.选择器

dom对象和jQuery对象互转

Dom对象:原生js获取节点

jQuery对象:jQuery选择器获取的节点对象

dom对象和jQuery对象不要混用。

Dom对象转换为jQuery对象:  $(dom对象)

jQuery对象转换为dom对象:  jQuery对象[index] / jQuery对象.get(index)

基本选择器

id选择器:   $(#id值)

标签选择器:  $(标签名称)

类选择器:  $(.class值)

• 组合选择器

并集选择器:  $(".red,p")

后代选择器:  $("p span")

子代选择器:  $(“p > span”)

• 属性选择器

[attr]

[attr=value]

• 基本筛选器   :关键字

console.log($("li:first"));

console.log($("li:last"));

console.log($("li:eq(1)"));

console.log($("li:lt(1)"));

console.log($("li:gt(1)"));

console.log($("li:even"));

console.log($("li:odd"));

 

• 表单选择器

:input:所有input元素,textarea，select

:text:所有的type为text的元素

:password:密码框

:Redio:单选框

:checkbox:多选框

:file:文件

 

 

• 可见性

:hidden:选择所有不可见元素

:visible:所有的可见的元素

获取和修改文本7.节点操作

html()/text():

  不传参数代表获取；传参代表赋值。

• 获取和修改属性

var src = $("img").attr("src");

console.log(src);

$("img").attr("src","img/p1.jpg");

//$("img").prop();



$("input").val("ls");  对value属性进行值的获取和设置



Eq(index):获取指定索引的jQuery对象

• 获取和修改样式

Css(样式名称,样式值)

$("div").css({"width":"200px","height":"200px","background":"red"});



$("div").addClass("red");

$("div").removeClass("red");

8.事件

• ui事件

      $(document).ready(); 页面加载事件

      和window.onload的区别:

      1.触发时机不一致 (x   3.x)

      $(document).ready()等待节点绘制则触发；

      Window.onload等待所有的节点绘制加载渲染完毕才触发。

      2.书写次数不一样。 Window.onload只出现一次

      3.简写。   $(func)

• 鼠标  click()   dblclick()  mouseover()
• 键盘  keydown()   keyup()
• 焦点  focus()   blur()
• 事件绑定及解绑

      $("input").on("click mouseover",function(){

           alert(1);

      });

             

     $("input").off("mouseover");