jquery

Posted 2020-12-13 zzyz

一、认识JQUERY

1、jquery：js封装的函数库

2、大招：$ = jQuery

$(selector) = 获取该选择器的jQuery对象 数组

$(selector).action(...) 群体操作特性

3、js 和jquery不可混用

(1)js 对象不可以访问jquery函数

(2)jquery对象不可以访问js函数

(3)但是js对象和jquery对象之间可以相互转化

var $obj = $(jsObj); js对象转化为jquery对象

 

jquery对象转化为js对象

var jsObj = $obj[0]; $对象遍历后得到的就是js对象

var jsObj = $obj.get(0);

 

 

二、jquery操作DOM

jquery获取html标签对象

1.根据选择器获取

var $obj = $(selector);

2.根据家族关系获取 var $obj = ...

（1）获取子元素数组：var $objChilds = $ref.children(selector);

（2）获取兄弟元素

前置元素

var $bigBros = $ref.prev([selector]) 前一个（带有selector选择器）的元素

var $bigBros = $ref.prevAll([selector]) 前所有（selector选择器）的元素

var $bigBros = $ref.prevUntil(selector) 前n个到selector结束之前的元素

后置元素

var $littleBros = $ref.next([selector]) 后一个（带有selector选择器）的元素

var $littleBros = $ref.nextAll([selector]) 后所有（selector选择器）的元素

var $littleBros = $ref.nextUntil(selector) 后n个到selector结束之前的元素

其他兄弟：

var $otherBros = $ref.sibling([selector]); 除了自己以外的（selector）的元素

后代元素：

var $descendents = $(document).find(selector);后代检索（不包括儿子）

（3）获取父级元素：

父级元素：

var $parent = $ref.parent([selector]);

父辈元素：

var parent = $ref.parents(selector);

 

三、jquery创建html标签对象

var $newEl = $(`<div id="" class="" ...>...</div>`)

四、jquery操作html标签对象 var $el...

1、操作值

(1)表单元素的值：var val = $el.val() 获值 $el.var(new_value); 赋值

(2)非表单元素的文本：var txt = $el.text; （文字内容）

$el.text (new _txt);

(3)非表单元素的内部结构：var structor =$ el.html();

$el.html( new _structor);

2、操作属性

（1）var attrVal = $el.attr("id"); $el.attr (attr_name,new_attr);

属性名称 属性的值

3、操作样式(CSS)

(1)具体样式：$el.css("cssName","cssValue");

$el.css({"cn1":"cv1","cn2":"cv2"...})

(2)类选择器：

var bool = $el.hasClass("classSelector");

$el.addClass("classSelector");

$el.removeClass("classSelector");

 

$el.toggleClass("classSelector"); 有则删除 没有则增加

4、操作元素

添加子元素：$el.appendChild(tagEl)

删除元素：$el.remove()；

 

五、事件、事件函数、事件绑定事件函数

1.事件

(1)click 鼠标单机

(2)keydown 键按下去

(3)keyup 键起来时

(4)keypress 键按压

(5)focus 聚焦事件

(6)blur 失去焦点

(7)mouseenter mouseover 鼠标输入

(8)mouseleave mouseout 鼠标起来

(9)mousemove 鼠标移动

(10)scroll 待命

2.事件函数：没有参数 没有返回值的普通函数

3.如何捆绑：

静态绑定

(1)$(selector).click(function);

(2)$(selector).hover(enterFunc,leaveFunc)

动态绑定

(1)$(document).on(eventName,selector,eventFunc);