2019-04-13 jQuery基础

2019-04-13 本文已影响0人 Sallyscript

主打write less do more

jQuery的引用

先引用jQuery，再引用js文件

在head标签里引用

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

$符号

jQuery的别名，$是一个合法的变量名

window.jQuery == window.$//两者意思相等
$ === jQuery //true

$的使用

绝大多数时候，我们都直接用$

若$变量已被占用，且不能改，就只能使用jQuery这个变量

原始格式

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

document代表HTML中最大的对象
ready代表准备就绪了
意思是HTML部分已经加载完成，可以开始运行函数体里面的内容

缩写格式

1
$().ready(function(){
  ...
});
2
$(function(){
  ...
});

js原生格式

window.onload = function(){
  ...
};

jQuery的小样例

var alinks = $('a');
for(var i = alinks.length-1;i>=0;i--)
{
//js写法
    alinks[i].style.background = 'red';
    alinks[i].style.border = '5px solid yellow';
    alinks[i].style.color = '#fff';   
 //jQuery写法
    alinks.eq(i).css({
      'background' : 'red',
      'border' : '5px solid yellow',
      'color' : '#fff' 
    })
}

选择器

返回的对象就是jQuery对象，类似数组，每个元素都是一个引用了DOM结点的对象。
不会返回undefined或者null
不必在下一行判断if(div === undefined)

ID选择器

$('#id')

根据给定的ID匹配一个元素

element选择器

$('标签名')

根据给定的元素标签名匹配所有元素
返回的是数组，长度是标签的个数

class选择器

$('.class')

根据给定的元素类名匹配所有元素
返回的是数组，长度是class对应标签的个数

多项选择器

$('.class, #id ,标签名')

根据给定的元素类名和id以及标签名匹配所有元素
取出来的数组顺序，会完全遵循HTML里标签的顺序

层次选择器

$('祖先后代')

在给定祖先元素下匹配所有的后代元素
后代包含子代，子代的后代，子代的后代的后代

$('父代>子代')

在给定父元素下匹配所有的子元素
这里的子代就是父代的子代

$('prev + next')

所有紧接着prev后的next元素
这边是亲兄弟

$('prev ~ siblings')

匹配prev元素后所有的siblings元素
这边包括亲兄弟及表兄弟

属性选择器attribute

$(‘[attribute]’)

属性名选择器

$('[attribute = value]')

属性值选择器
选择特定属性值的元素

$('[attribute ！= value]')

非属性值选择器

$('[attribute ^= value]')

属性值包含value的选择器

$('[attribute $ = value]')
准确找关键词有value的选择器

$('[attribute *= value]')

模糊查找关键词value的选择器

多属性选择器

image.png

过滤选择器

ps：

HTML

first表示：details下面的第一个子标签必须是p标签才能取出
last表示：details下面的倒数第一个子标签必须是p标签才能被取出

:first-child

:last-child

取出第一个标签为p标签的元素

:nth-child(n | even | odd | formula)

:nth-last-child(n | even | odd | formula)

取出 details下只有一个子标签，并且这个标签是p的元素

:only-child

过滤器的type

image.png

type重点不是HTML正常标签的顺序
重点是某类型标签在HTML中的顺序

:first-of-type

first的值是details下第一个出现p时的元素。这个元素不一定是第一个标签。

:last-of-type

:nth-of-type(n | even | odd | formula)

:nth-last-of-type(n | even | odd | formula)

:only-of-type

过滤器的参数

n

匹配子元素序号。必须为整数，从1开始

even

匹配所有偶数元素

odd

匹配所有奇数元素

formula

使用特殊公式如（an+b）进行选择

表单相关

：input

可以选择<input> , <textarea> , <select> , <button>

：text

匹配所有的单行文本框，和input[type= 'text']一样

其他的input的type

image.png

：enable、：disable

enable匹配所有可用元素；disable匹配所有不可用元素

：checked

匹配所有被选中的元素（复选框，单选框等，selected中的option）

：selected

匹配所有选中的option元素

：find（expr | object | element）

搜索所有与制定表达式匹配的元素

：children（[expr]）

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

：parent（[expr]）

取得一个包含着所有匹配元素的唯一父元素的元素集合

：next（[expr]）、prev（[expr]）

取得一个包含匹配的元素集合中每一个元素紧邻的后面（前面）同辈元素的元素集合

：eq（index | -index）

获取当前链式操作中第N个jQuery对象

：siblings（[expr]）

获取一个包含匹配元素集合中的每一个元素的所有唯一同辈元素的元素集合

：filter（expr | object | element | fn）

筛选出与指定表达式匹配的元素集合

参数：

expr：字符串值，包含供匹配当前元素集合的选择器表达式

object：现有的jQuery对象，以匹配当前的元素

element：一个用于匹配元素的dom元素

fn：一个函数用来作为测试元素的集合

事件类型

鼠标事件

click([[data],fn])、dblclick([[data],fn])

click鼠标单击时触发
dblclick鼠标双击时触发

mousedown、mouseup

mousedown鼠标按下时触发
mouseup按下鼠标放松时触发

mouseenter、mouseleave

鼠标进入
鼠标移出

hover([over],out)

鼠标进入和退出时触发两个函数
相当于mouseenter和mouseout的结合

mouseover、mouseout

鼠标进入指定元素子元素时触发
鼠标移出指定元素子元素时触发

mousemove([data],fn)

在DOM内移动时，会发生mousemove事件

scroll( [ [data] , fn ] )

在DOM内滚动时，会发生scroll事件

keydown( [ [data],fn ] )

当键盘或按钮被按下时，发生keydown事件。
ps:

$(document).ready(function(){
  $(document).keydown(function(event)
  {
    console.log(event);
  }
}

keyup ( [ [data],fn ] )

当按钮被松开时，发生keyup事件。它发生在当前获得焦点的元素上。

其他事件

ready（fn）

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

resize（[[data],fn]）

当调整浏览器窗口的大小时，发生resize事件。

$(window).resize(function(){
  console.log($(this));
});

focus（[[data],fn]）/blur（[[data],fn]）

当元素获得焦点时触发focus事件
当元素失去焦点时触发blur事件

change（[[data],fn]）

当元素的值改变，会发生change事件
输入的时候不会发生检测，只有当与外界发生交互是会发生检测

select（[[data],fn]）

当textare或文本类型的input元素中的文本被选择时，会发生select事件
仅仅针对于输入框里输入的文本内容有效

submit（[[data],fn]）

当提交表单，会发生submit事件

事件参数

event

所有事件都会传入event作为参数，可以从event对象中获取到更多信息。

事件绑定与取消

on（events,[selector],[data],fn）

在选择元素上绑定一个或多个事件的事件处理函数
ps：

方法一：
var index=0;
$('a').on('mouseenter',function(){
  index = $(this).index;
});
方法二：
var index=0;
$(document).on('mouseenter','a',function(){
  index = $(this).index;
});
绑定多个事件：
var index=0;
$('a').add(document).on({
  mouseenter : function(event){
    event.stopPropagation();
    index = $(this).index;
   },
  keydown : function(event){
    event.stopPropagation();
     .....
  }
});

off（events,[selector],fn）

在选择元素上移出一个或多个事件的事件处理函数

image.png

one（type,[data],fn）

为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数。

2019-04-13 jQuery基础

主打write less do more

jQuery的引用

在head标签里引用

$符号

jQuery的别名，$是一个合法的变量名

$的使用

绝大多数时候，我们都直接用$

若$变量已被占用，且不能改，就只能使用jQuery这个变量

原始格式

缩写格式

js原生格式

jQuery的小样例

选择器

ID选择器

$('#id')

element选择器

$('标签名')

class选择器

$('.class')

多项选择器

$('.class, #id ,标签名')

层次选择器

$('祖先 后代')

$('父代>子代')

$('prev + next')

$('prev ~ siblings')

属性选择器attribute

$(‘[attribute]’)

$('[attribute = value]')

$('[attribute ！= value]')

$('[attribute ^= value]')

$('[attribute *= value]')

多属性选择器

过滤选择器

:first-child

:last-child

:nth-child(n | even | odd | formula)

:nth-last-child(n | even | odd | formula)

:only-child

过滤器的type

:first-of-type

:last-of-type

:nth-of-type(n | even | odd | formula)

:nth-last-of-type(n | even | odd | formula)

:only-of-type

过滤器的参数

n

even

odd

formula

表单相关

：input

：text

其他的input的type

：enable、：disable

：checked

：selected

：find（expr | object | element）

：children（[expr]）

：parent（[expr]）

：next（[expr]）、prev（[expr]）

：eq（index | -index）

：siblings（[expr]）

：filter（expr | object | element | fn）

参数：

expr：字符串值，包含供匹配当前元素集合的选择器表达式

object：现有的jQuery对象，以匹配当前的元素

element：一个用于匹配元素的dom元素

fn：一个函数用来作为测试元素的集合

事件类型

鼠标事件

click([[data],fn])、dblclick([[data],fn])

mousedown、mouseup

mouseenter、mouseleave

hover([over],out)

mouseover、mouseout

mousemove([data],fn)

scroll( [ [data] , fn ] )

keydown( [ [data],fn ] )

$('祖先后代')