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 = "[email protected]";

           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

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");

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

猜你喜欢