[150824]Jquery 学习笔记

最新推荐文章于 2024-08-31 10:44:02 发布

AxisLamb

最新推荐文章于 2024-08-31 10:44:02 发布

阅读量528

点赞数

文章标签：互联网 java

本文链接：https://blog.csdn.net/AxisLamb/article/details/47958583

版权

java学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、问候Jquery

功能：在文本框输入Hello Jquer!~，然后点击Button时就alert文本框里面的内容。

关键字：获取Dom节点对象，编写Js函数。

以下是三种办法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Jquery</title>
//引入Jquery，必须
<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	//获取节点的传统的方法，在input按钮控件上添加onclick属性触发函数。
	/* function getContent () {
		var content = document.getElementById("content").value;
		alert (content);		
	} */
	
	//body onload属性，在文档加载完以后执行方法。关键字：1、body οnlοad="init()"属性 2、function对象
	/* function init () {
			document.getElementById("actionButton").οnclick=function (){
			var content = document.getElementById("content").value;
			alert (content);
		}
	} */
	
	//第三种方法，原理跟第二种一样，在文档加载完成后执行函数，这次用Jquery库完成。获得DOM节点的方式：$("# id")==根据id获取节点对象，
        //js内置对象直接$()套上即可，区分jsp的EL表达式（${}大括号）与内置对象（document是Js的内置对象）。
	//Js很多函数都是嵌套着执行。比如下面，执行了ready方法就会执行function1，执行了function1就会执行click，然后
	//执行了click后就会执行function2，要牢记
	$(document).ready(function () {
		$("#actionButton").click(function () {
			alert ($("#content").val());			
		});
	});
	
</script>
</head>
<body>
<input type="text" id="content" /><input type="button" value="submit" id="actionButton">
</body>
</html>

2、Jquery 选择节点的方法详解。

PS：选出来的节点不一定是一个，很有可能是多个DOM节点，这时候可以方便的同时操作多个节点。

当然也可以巧妙的根据需要选择文档中指定的DOM节点。

<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		
		//在Jquery中选出来的节点不一定只有一个，可能是多个。
		//普通选择器：根据id,类别,标签名选择DOM节点。
		// $("#a2").css("background-color","red");
		// $(".c1").css("background-color","red");
		// $("a").css("background-color","red"); //选出多个标签为<a>的DOM节点.
		
		// 属性选择器：根据[属性]来选择DOM节点。[href$='com']表示选择尾字符为com的节点。
		// $("[href='#']").css("background-color","red");
		// $("[href$='net']").css("background-color","red");
		
		// 其他选择器 选择列表中指定位置的节点： ul li:first   &&  ul li:last 
		$("ul li:first").css("background-color","red");
		$("ul li:last").css("background-color","red");
	});
</script>

3、Jquery操作DOM节点

<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		//一、节点的CRUD  
		//查找节点。
		/* var li=$("ul li:eq(0)").text();
		alert(li);*/
		 
		//创建节点 ： 1、直接在尾端创建节点 2、在任意节点下方创建节点。
		/* $("ul").append("<li><font title=\"这是恩格斯\" color=\"red\" size=\"5\">恩格斯</font></li>"); */
		/* var li2=$("<li title='我是李彦宏'>李彦宏</li>")
		var li22=$("ul li:eq(1)");
		li2.insertAfter(li22); */
		
		//删除节点：关键：得到要删除的节点的对象调用remove()方法即可。
		/* var li=$("ul li:eq(2)");
		li.remove(); */
		
		//二、DOM属性的操作。
		//获取指定属性(key)的值(value)。 关键：先获取属性所在的DOM节点对象，再通过 domObject.attr("attribute")方法获取属性值
		/* var li=$("ul li:eq(1)");
		var li_attr=li.attr("title");
		alert(li_attr); */
		
		//设置属性，还是用 DOM对象的 attr()的重载方法attr("key","value")。
		/* var li=$("ul li:eq(1)");
		li.attr("title","我是马化腾"); */
		
		//删除属性
		/* var li=$("ul li:eq(1)");
		li.removeAttr("title"); */
		
		//三、获取与设置节点的HTML，文本或者输入值。
		//获取HTML，关键字 ： html()的重载方法，既可以获取又可以设置。
		/* var li=$("ul li:eq(0)");
		alert(li.html()); */
		
		//设置HTML
		/* var li=$("ul li:eq(1)");
		li.html("<font size='10'>呵呵</font>"); */
		
		//获取节点文本。关键字 ：text()的重载方法，既可以获取又可以设置。
		/* var li=$("ul li:eq(1)");
		alert(li.text()); */
		
		//设置节点文本。
		/* var li=$("ul li:eq(1)");
		li.text("Hello Jquery!~"); */
		
		//遍历节点 （重要！重要！）
		//先得到DOM节点对象，用children()方法得到其下的所有节点的集合。
		/* var body=$("body").children();
		alert(body.length); */
		
		//先得到某个DOM节点对象，用next()方法得到下一个节点对象。
		/* var li=$("ul li:eq(1)").next();
		alert(li.text()); */
		
		//先得到某节点对象，用prev()方法得到前一个节点的对象。
		/* var li=$("ul li:eq(1)");
		alert(li.prev().text()); */
		
		
	});
</script>

4、Jquery事件机制控制

PS：主要为控件的事件，如单击、双击控件，移入、移出控件等。

<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
	 	$("#button").click(function (){
			//$("#p1").html("我是html");
			//$("#p1").text("我是text");
			$("#text").val("我是value");
		}); 
		
		$("#button").dblclick(function() {
			$("#p1").html("我被点两次啦");			
		});
		
		//鼠标点击控件，就说控件获取了鼠标焦点。
		/* $("#text").focus(function () {
			$("#text").val("获取了鼠标焦点。");			
		}); */
		
		//失去焦点。
		/* $("#text").blur(function () {
			$("#text").val("失去了鼠标焦点");			
		}); */
		
		//鼠标移入。
		$("#text").mouseover (function () {
			$("#text").val("鼠标移入");
		});
		
		//鼠标移出。
		$("#text").mouseout (function() {
			$("#text").val("鼠标移出");
		});
		
		//鼠标事件总结：操作Jquery事件，最重要的还是先获取DOM节点对象，调用对象的事件机制相关的方法即可对事件进行监听与控制。
		//关键:1.获取DOM节点对象 2.相关函数：click(),dblclick(),focus(),blur(),mouseover(),mouseout().
	});

AxisLamb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[150824]Jquery 学习笔记

1、问候Jquery功能：在文本框输入Hello Jquer!~，然后点击Button时就alert文本框里面的内容。关键字：获取Dom节点对象，编写Js函数。以下是三种办法：Hello Jquery//引入Jquery，必须 //获取节点的传统的方法，在input按钮控件上添加onclick属性触发函数。 /* function getContent (
复制链接

扫一扫

专栏目录