07-JQuery

环境搭建

来源

• 官网 - 官方文档

• CDN - 在线

使用

导入jQuery文件，使用<script>标签引入

JS对象与JQuery对象

两者不互通

方法	作用
$(Js)	Js对象转JQuery对象
jQuery[index]	JQuery对象转Js对象

事件处理

添加

方式一

jQuery对象.on(事件名,函数对象)

jQuery对象.bind(事件名，函数对象)

对某个jQuery绑定事件，触发则会执行函数对象

方式二

函数式绑定：jQuery对象.事件名（函数对象）

一旦触发事件，则调用函数对象

移除

jQuery对象.off(事件名)

$("#btn1").off("click");

选择器

基本语法

$("选择器").方法;

基础选择器

$("选择器")

方法	作用
*	通用选择器
#id	id选择器（只选择第一个）
.class	类选择器
标签名	标签选择器
选择器1，选择器2...	组合选择器

层级选择器

选择器	作用
父 元素	后代选择器
父>子	子类选择器
同级~同级内	兄弟选择器
同级+同级内	相邻选择器

基本筛选器

$(选择器：筛选器)

筛选器	作用
:first	获取头部元素
:last	获取尾部元素
:not(选择器)	去除所有指定元素
:even	获取偶元素
:odd	获取奇元素
:eq(下标)	等于下标的元素
:gt(下标)	大于下标的元素
:lt(下标)	小于下标的元素
:header	标题元素

表单筛选

筛选器	作用
:input	匹配所有input, textarea, select，button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮（ submit，button ）
:button	匹配所有按钮
:file	匹配所有文件域

常用事件

预加载

$(选择器).ready(function(){
  // 预加载代码...
});

筛选器	作用	场景
.hover()	鼠标放置触发	文章
.click()	单击	按钮
.dbclick()	双击	按钮
.blur()	失去焦点	文本框
.change()	改变事件	下拉框
.keyup()	键盘松开	登录

each方法

// 数组遍历
var arr = ["a","b","c"];
$.each(arr, function(下标，元素) {
    console.log(this);
});

取值

筛选器	作用
jQuery对象.val()	获取元素value属性值
jQuery对象.html()	获取元素内部HTML 代码
jQuery对象.text()	获取元素内部文本信息

赋值

$("#选择器").on("事件", function() { 
    // 传参 -- 覆盖（修改）
    $("p").html($("p").html()+"新值");
})

特殊现象处理

标签默认行为

a -- 默认页面跳转

from -- 默认会提交数据（也会跳转）

阻止默认行为

preventDefault();

<a href="" onclick="testa(this)">点击</a>
<script>
    function testa(t){
        //阻止默认的行为
        event.preventDefault();
    }
</script>

事件冒泡

事件冒泡：子元素上触发的事件，被父元素捕获

阻止事件冒泡

event.stopPropagation();

$("子元素").on("click",function(){
    $("子元素").css("background-color","blue");
    // 阻止子元素触发带动父元素事件捕获变化
    event.stopPropagation();
});

事件委托

将子元素的事委托给父元素处理（底层逻辑：事件冒泡）

前提：只存在于父子关系

on(事件名,委托者(选择器),回调函数)

$("父").on("click","子",function(){
    $(this).css("background-color","red");
});

event对象和this对象

使用jQuery绑定事件，直接给你event对象和this对象

$("父").on("click","子",function(){
    // 事件本身
    console.log(event); 
    // 事件触发者 -- 原生JS对象
    console.log(this);
});

操作元素属性

元素属性分类

1、固有属性 元素自带属性：id class name...

2、自定义属性

// aa 自定义的属性 值为aa
<a href="" aa="aa"></a>

3、返回值属性（true / false）：checked selected...

操作元素的方法

返回值为布尔类用prop方法，其他属性操作都用attr

方法	作用
.attr("属性名","属性值")	设置新属性K-V
.prop("属性名","属性的值")	设置新属性K-V

操作元素的样式（css）

方法名	作用
.attr("class","class值")	设置样式表（存在则覆盖）
.addClass(class值)	添加样式（有则叠加）
.css({css样式})	添加内联样式

操作DOM元素

元素添加

方法名	作用
.append(str)	指定元素内部的最后添加元素
.prepend(str)	指定元素内部的最前添加元素
.after(str)	指定元素外部的最后添加元素（兄弟）
.before(str)	指定元素外部的最前添加元素（兄弟）

元素删除

方法名	作用
empty()	清空某个元素的内部HTML
remove()	直接删除元素