jQuery基础小白入门

最新推荐文章于 2022-04-20 17:28:45 发布

frsgshth

最新推荐文章于 2022-04-20 17:28:45 发布

阅读量493

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/LeeHhhJ/article/details/105909026

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

jQuery中常见的两种入口函数：

第一种: (推荐)

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ;

第二种:

$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jQuery中的顶级对象$

1.$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $
2.$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法

jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）
注意：
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.cutrent”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号从index从开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

筛选方法

语法	用法	说明
parent()	$(“li”).patent()	获取第一个li元素
children(selector)	$(“ul”).children(“li”)	查找父级
find(selector)	$(“ul”).find(“li”)	相当于`$("ul>li")`，相近一级(亲儿子)
siblings(selector)	$(".first").siblings(“li”)	相当于`$("ul li")`，后代选择器
nexttAll([expr])	$(".first").nextAll()	查找兄弟节点，不包括自己本身
prevtAll([expr])	$(".last").prevAll()	查找当前元素之后所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检测当前的元素是否含有某个特定的类，如果又，则返回true
eq(index)	$(“li”).eq(2)	相当于`$("li.eq(2)")`，index从0开始

jQuery实现新浪下拉菜单

在这里插入图片描述

$(function()$ {
	// 鼠标经过
	$(".nav>li").mouseover(function(){
		$(this).children("ul").show()
	})
	// 鼠标离开
	$(".nav>li").mouseover(function(){
		$(this).children("ul").hide()
	})
})

jQuery实现排他思想

点击高亮效果

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
	$(function() {
		// 1.隐式迭代 给所有的按钮都绑定了点击事件
		$("button").click(function() {
			// 2.当前的元素变化背景颜色
			$(this).css("blackground", "pink")
			// 3.其余的兄弟节点去掉背景色，隐式迭代
			$(this).siblings("button").css("background", "")
		})
	})
</script>

jQuery实现展示栏

在这里插入图片描述

$(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index()
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show()
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide()
                // 链式编程
                $("#content div").eq(index).show().siblings().hide()

            })
        })

jQuery操作css方法

参数只写属性名，则返回属性值。

$("div").css("width")

参数是属性名，属性值，逗号分割。属性必须加引号，值如果是数字可以不加单位和引号。

$("div").css("width", "300px")
$("div").css("width", 300);

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分开，属性可以不用加引号。

$("div").css({
	width: 400,
    height: 400,
    backgroundColor: "red"
    // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
$(this).css({ "color":"white","font-size":"20px"});

注意：css() 多用于样式少时操作，多了则不太方便。

设置类样式方法

.current{
	background-color: red;
}

添加类

$("div").addClass("current")

删除类

$("div").removeClass("current")

切换类

$("div").toggleClass("current")

tab栏案例

在这里插入图片描述

$(function() {
	// 1.点击上部的li，当前li 添加current类，其余兄弟移除类
    $(".tab_list li").click(function() {
    	// 链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
        // 2.点击的同时，得到当前li 的索引号
        var index = $(this).index();
        // 3.让下部里面相应索引号的item显示，其余的item隐藏
        $(".tab_con .item").eq(index).show().siblings().hide();
    });
})

类操作与className区别

原生js中的className会覆盖原有类名

var one = document.querySelector(".one");
one.className = "two";

jQuery中的类操作只是对指定类进行操作，不影响原有类名

jQuery效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle()
划入画出：slideDown() / slideUp() / slideToggle()
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo()
自定义动画：animate()
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop()

参数：

参数可以省略
speed：三种预定速度之一的字符串(“slow”，“normal”，“fast”)或表示动画时长的毫秒数(如：1000)
easing：(Optional)用来指定切换效果，默认是：“swing”(先慢后快再慢) ，可用参数“linear“(匀速)
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
opacity 透明度必须写，取值0~1之间 (fadeTo的opacity、speed必须有)
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。(自定义动画其余参数可以省略)

显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle()

// 显示
show( [ speed, [easing], [fn] ] )
// 隐藏
hide( [ speed, [easing], [fn] ] )
// 切换
toggle( [ speed, [easing], [fn] ] )

滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle()

// 下滑
slideDown( [ speed, [easing], [fn] ] )
// 上滑
slideUp( [ speed, [easing], [fn] ] )
// 滑动切换
slideToggle( [ speed, [easing], [fn] ] )

淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo()

// 淡入效果
fadeIn( [ speed, [easing], [fn] ] )
// 淡出效果
fadeOut( [ speed, [easing], [fn] ] )
// 淡入淡出切换效果
fadeToggle( [ speed, [easing], [fn] ] )
// 渐进方式调整到指定透明度
fadeTo( [speed], opacity, [easing], [fn] )

自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()

animate(params,  [speed], [easing], [fn] )

hover事件切换

jQuery中的hover() 功能类似与css中的伪类:hover

hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

$(".nav>li").hover(function() {
	$(this).children("ul").slideDown(200);
	}, function() {
	$(this).children("ul").slideUp(200);
})
// 相当于
$(".nav>li").hover(function() {
	$(this).children("ul").slideToggle();
})

动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

stop()

stop()方法用于停止动画或效果
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
总结: 每次使用动画之前，先调用 stop() ,在调用动画。

$(".nav>li").hover(function() {
	$(this).children("ul").stop().slideToggle();
})

fadeTo突出显示案例

在这里插入图片描述

$(function() {
	$(".wrap li").hover(function() {
		$(this).siblings().stop().fadeTo(400, 0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(400, 1);
	})
})

animate的使用

$(function() {
	$("button").click(function() {
		$("div").animate({
			left: 500,
			top: 300,
			opacity: .4,
			width: 500
		}, 500)
	})
})

案例：
在这里插入图片描述

<div class="king">
	<ul>
		<li class="current">
			<a href="#">
				<img src="images/m1.jpg" alt="" class="small">
                <img src="images/m.png" alt="" class="big">
            </a>
        </li>
        <li>
        	<a href="#">
                <img src="images/l1.jpg" alt="" class="small">
                <img src="images/l.png" alt="" class="big">
            </a>
        </li>
        // …………li*n
	</ul>
</div>
		.king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        .king li.current {
            width: 224px;
        }
        .king li.current .big {
            display: block;
        }
        .king li.current .small {
            display: none;
        }
        .big {
            width: 224px;
            display: none;
        }
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }

$(function() {
	// 鼠标经过某个小li 有两步操作：
	$(".king li").mouseenter(function() {
		// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
		$(this).stop().animate({
			width: 224
		}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
		// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
		$(this).siblings("li").stop().animate({
			width: 69
		}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
	})
});

jQuery属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href ，比如<input>元素里面的 type

1. 获取元素固有属性：
prop("属性")
2. 设置属性语法：
prop("属性", "属性值")

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等

元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”

1. 获取属性语法
attr("属性")    // 类似原生getAttribute()
2. 设置属性语法
attr("属性", "属性值")    // 类似原生setAttribute()

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 获取数据语法
data("name")	// 向被选元素获取数据
2. 附加数据语法
data("name", "value")	//向被选元素附加数据

注意：同时，还可以读取 HTML5 自定义属性 data-index ，不用写data-，得到的是数字型。

jQuery内容文本值

主要针对元素的内容还有表单的值操作
jQuery的文本属性值常见操作有三种：html() / text() / val()
分别对应JS中的 innerHTML 、innerText 和 value 属性

普通元素内容html() (相当于原生innerHTML)

html()	// 获取元素的内容
html("内容")	// 设置元素的内容

普通元素文本内容text () (相当于原生innerText)

text()	// 获取元素的文本内容
text("内容")	// 设置元素的文本内容

表单的值val() (相当于原生value)

val()	// 获取表单的值
val("内容")	// 设置表单的值

jQuery元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

语法一：主要用于同一类元素不同操作，需要用到遍历元素

类似for，但比for强

$("div").each(function (index, domEle) { xxx; })

$(function() {
	var sum = 0;
	var arr = ["red", "green", "blue"];
	// 回调函数第一个是索引号 第二个是dom元素对象  都可以自己命名
	$("div").each(function (index, domEle) {
		$(domEle).css("color", arr[index]);
		sum += parseInt($(domEle).text());
	})
	console.log(sum)
})

each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象
所以要想用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2：主要用于遍历数据，处理数据

$.each(object, function (index, element) { xxx; })

$(function() {
	var arr = ["red", "green", "blue"];
	// 回调函数第一个是索引号 第二个是element元素对象  都可以自己命名
	$.each($("div"), function (index, ele) {})
	$.each(arr, function (index, ele) {})
	$.each({
		name: "andy",
		age: "18"
	}, function(index, ele) {})
})

$each()方法可用于遍历任何对象。主要用于数据处理，对象
里面的函数有2个参数：index是每个元素的索引号;element遍历内容
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

创建、添加、删除元素

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

<ul>
    <li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
$(function() {
	// 1. 创建元素
	var li = $("<li>我是后来创建的li</li>");
	
	// 2. 添加元素
	// (1) 内部添加
	$("ul").append(li);  // 内部添加并且放到内容的最后面 
	$("ul").prepend(li); // 内部添加并且放到内容的最前面
	// (2) 外部添加
	var div = $("<div>我是后妈生的</div>");
	$(".test").after(div);
	$(".test").before(div);
	
	// 3. 删除元素
	$("ul").remove(); // 可以删除匹配的元素(本身)
	$("ul").empty(); // 可以删除匹配的元素里面的子节点(ul还在)
	$("ul").html(""); // 清空匹配的元素内容(等价于empty)
})

购物车全选案例

在这里插入图片描述

<input type="checkbox" class="checkall"> 全选
<input type="checkbox" name="" id="" checked class="j-checkbox">

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
	$(".checkall").change(function() {
		$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"))
		if($(this).prop("checked")){
			// check-cart-item就是选中后添加的背景颜色
			// 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
		} else {
			// check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
		}
	});
	
	// 2. 如果小复选框被选中的个数等于小复选框个数 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 小复选框个数) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
        	// check-cart-item就是选中后添加的背景颜色
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p  
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        // substr去掉￥符号
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    
    //  4. 用户修改文本框的值 计算 小计模块  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价 
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    
    // 5. 计算总计和总额模块
    // 页面开启先计算一次
    getSum();
    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    
    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

jQuery事件

4种常见注册事件
on绑定事件的优势
jQuery事件委派的优点以及方式
绑定事件与解绑事件

jQuery事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

$(function() {
	// 1.单个事件注册
	$("div").click(function() {
		$(this).css("background", "purple");
	});
	$("div").mouseenter(function() {
		$(this).css("background", "skyblue");
	});
});

jQuery事件处理

事件处理 on() 绑定事件

优势1：可以绑定多个事件，多个处理事件处理程序
优势2：可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
优势3：动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件。

$(function() {
	// 事件处理on
	// (1) on可以绑定1个或者多个事件处理程序
	$("div").on({
		mouseenter: function() {
			$(this).css("background", "skyblue");
		},
		click: function() {
			$(this).css("background", "purple");
		},
		mouseleave: function() {
			$(this).css("background", "blue");
		}
	})
	// 如果事件处理程序相同
	$("div").on("mouseenter mouseleave", function() {
    	$(this).toggleClass("current");
    });
    
    // (2) on可以实现事件委托（委派） 
    // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
    $("ul").on("click", "li", function() {
    	alert(11);
    });
	
	// (3) on可以给未来动态创建的元素绑定事件 
	$("ol").on("click", "li", function() {
    	alert(11);
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);
})

文本输入效果

在这里插入图片描述

$(function() {
	// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
	$(".btn").on("click", function() {
		var li = $("<li></li>");
		li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
		$("ul").prepend(li);
		li.slideDown();
		$(".txt").val("");
	})
	// 2.点击的删除按钮，可以删除当前的微博留言li
	$("ul").on("click", "a", function() {
    	$(this).parent().slideUp(function() {
        	$(this).remove();
        });
	})
})

事件处理 off() 解绑事件

off () 方法可以移除通过 on() 方法添加的事件处理程序

$(function() {
	// 1.事件解绑off
	$("div").off() // 解绑div所有事件
	$("div").off("click") // 解绑div的click事件
	$("ul").off("click", "li") // 解绑事件委托
	// 2.one() 只能触发事件一次
	$("p").one("click", function() {
		alert(11);
	})
})

自动触发事件 trigger()

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

$(function() {
	$("div").on("click", function() {
		alter(111)
	})
	// 自动触发事件
	// 1. 元素.事件()
	$("div").click(); // 会触发元素的默认行为
	// 2. 元素.trigger("事件")
	$("div").trigger("click"); // 会触发元素的默认行为
	$("input").trigger("focus"); // 光标的默认行为(光标的闪动)
	// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为(光标的闪动)
	$("div").triggerHandler("click");
	$("input").on("focus", function() {
		$(this).val("你好吗");
	});
	// $("input").triggerHandler("focus");
})

jQuert事件对象

事件被触发，就会有事件对象的产生
阻止默认行为：event.preventDefault() 或 return false
阻止冒泡：event.stopPropagation()

element.on(events,[selector],function(event){})

$(function() {
	$(document).on("click", function(event){
		console.log("点击了document")；
	})
	$("div").on("click", function(event){
		console.log("点击了div")；
		event.stopPropagation();
	})
})

frsgshth

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础小白入门

jQuery初学jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互jQuery中常见的两种入口函数：第一种: 简单易用。 (推荐)$(function () { ... // 此处是页面 DOM 加载完成的入口}) ; 第二种: 繁琐，但是也可以实现$(document).ready(functio...
复制链接

扫一扫