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);
});