前端（一） jQuery 、 Js 、Ajax

最新推荐文章于 2024-09-13 23:32:49 发布

huoxue_2012

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量375

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/huoxue_2012/article/details/78332799

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、jQuery

1、web项目引入jquery：

如果可以上网，只需在<head> </head>引入如下代码即可

	 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.1/jquery.js"></script>

jquery2.0及以上支持移动端，但是不再支持 IE 6、7、8。

2、$(document).ready(function() {......}；表示当页面加载完成之后执行，比如说页面加载完成之后我要触发一个弹框，就可以写成：

$(document).ready(function(){

alert('这是一个弹窗');
});

3、（1）获取单个按钮的文本，eg.当前按钮的id为 id ="btnExecute"，则为：$("#btnExecute").text()

（2）获取foreach循环中按钮的文本：

<c:forEach items="${page.list}" var="trainningPlan">
			<tr data-id="${trainningPlan.id}">								
				<td style="text-align: center">
					${trainningPlan.planGoal}
				</td>				
				<td style="text-align: center">
					<button id= "btnExecute" onClick="javascript:btnExecute()" class="btn btn-primary">执行</button>   
    					<a href="...">修改</a>   
					<a href="..." οnclick="return confirmx('确认要删除该训练计划管理吗？', this.href)">删除</a>
				</td>
			</tr>
		</c:forEach>

注意：在行申明处加上 <tr data-id="${trainningPlan.id}">是为了foreacn中找到用户点击的当前行，而不是所有行。

	function btnExecute(event) {
		var event = window.event || event;
		var ele = event.srcElement || event.target;
		var id = $(ele).closest("tr").attr("data-id");     //获取点击的当前按钮
		top.$.jBox.confirm("确定执行？", "系统提示", function(v, h, f) {    //弹框“确认”“取消”
			if (v == "ok") {
				//隐藏按钮
				$(ele).hide();
				//获取隔壁列的<a>,先获取父节点的<td>，然后获取它的子节点<a>中的第一个，eq(0)表示第一个
				$(ele).parent().prev('td').children('a').eq(0).hide();  
				$(ele).siblings('a').hide();   //获取该按钮的兄弟元素<a>
				}
			}, {
			buttonsFocus : 1
			});
		}





二、Js
1、获取当前页面的 URL :
var url = window.location.href;
alert(url);

2、每次点击一个链接之后，该链接变色；点击下一链接后，下一链接变色，以前的链接颜色恢复：

     var lastobj;
     function change(obj,id){
	if(lastobj) {
	     lastobj.style.color="black";
	     lastobj.style.fontWeight=200;
	}
	    obj.style.color="red";
	    obj.style.fontWeight=800;
	     lastobj=obj
	} 




三、Ajax