首页 > Web开发 > 详细

JQuery

时间:2019-04-29 20:58:02      阅读:169      评论:0      收藏:0      [点我收藏+]

JQuery概念:
JQuery是一个框架,用原生JavaScript代码封装成一个函数库,可根据需求使用相应语法调用;(类似于Java类中封装方法)

JQuery的导入:
直接在html文件的head部分添加(<script src="js/jquery.min.js"></script>),需写在最前面否则在自定义JS文件中会找不到jQuery;

jQuery选择器概述:
选择器是jQuery的核心,且jQuery选择器与css选择器语法类似;

id选择器:$( "# ID名 " );
类选择器:$( ". 类名 " );
元素选择器:$( " 元素名 " );
组选择器:$( " 元素名,. 类名,# ID名 。。。" );
后代选择器:$( " 父元素名 子元素名 " );
子选择器:$( " 父元素名 > 子元素名 " );
选择指定父元素下的指定子元素
第一个子元素:后代选择器:$( " 父元素名 子元素名:first " );
最后一个子元素:后代选择器:$( " 父元素名 子元素名:last " );
not 选择器(多用于复选框)
选中选择器:$( " 元素名:(checked) " );
未选中选择器:$( " 元素名:not(:checked) " );
偶数选择器:$( " 父元素名 子元素名:even" );
奇数选择器:$( " 父元素名 子元素名:odd" );
eq选择器:$( " 父元素名 子元素名:eq(索引)" );<选择指定索引元素>
gt选择器:$( " 父元素名 子元素名:gt(索引)" );<选择大于指定索引的元素>

 

JavaScript文件中事件绑定方式:
$(function(){
$("button").click(function() {
alert("JavaScript第一种绑定方式")
});
})

$(function(){
$("button").click(method);
})
function method(){
alert("JavaScript第二种绑定方式")
}

HTML文件中事件绑定方式:
<script >
$(function(){
$("button").click(function() {
alert("HTML第一种绑定方式")
});
})
</script>

<script >
$(function(){
$("button").click(method);
})
function method(){
alert("HTML第二种绑定方式")
}
</script>


多元素绑定同一事件案例
$(function(){
$("button").click(removeById);
})
//定义删除函数
function removeById(){
//弹窗确认是否删除
var flag=window.confirm("是否删除数据");
//返回值为false直接结束函数
if (!flag) {
return ;
};
//获取需要删除数据的编号
//$(this):表示触发函数的元素
//$(this).parents("tr"):获取该元素的父类元素
//$(this).parents("tr").find("td:eq(0)"):根据父类元素查询对应编号所在的元素
//$(this).parents("tr").find("td:eq(0)").text():获取元素内部文本内容
var empno = $(this).parents("tr").find("td:eq(0)").text();
var parentTr=$(this).parents("tr");
$(this).parents("tr").fadeOut(‘slow‘, function() {
//移除已被删除的元素
parentTr.remove();
console.log($("tr").length);
});

 

JQuery

原文:https://www.cnblogs.com/hasagi/p/10792723.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!