Javaweb学习记录04

最新推荐文章于 2024-07-25 11:52:08 发布

Dell.Chen

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量86

点赞数 1

分类专栏： javaweb 文章标签： jquery html

本文链接：https://blog.csdn.net/csw3186016056/article/details/104353926

版权

javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQuery

JQuery API(网上找的)

http://hemin.cn/jq/index.html;

附加一个案例

https://blog.csdn.net/csw3186016056/article/details/104357079

jquery和html的整合:

jquery是单独的js文件
	通过script标签的src属性导入即可

获取一个jquery对象

$("选择器")  或者 jQuery("选择器")

dom对象和jquery对象之间的转换

dom对象===>jquery对象	
	$(dom对象)
jquery对象===>dom对象
	方式1:
		jquery对象[index]
	方式2:
		jquery对象.get(index)

页面加载:

js:
	window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
	方式1:
		$(function(){...})
	方式2:
		$(document).ready(function(){});

派发事件:

$("选择器").click(function(){...});
等价于 原生js中
	dom对象.onclick=function(){....}
掌握事件:
	focus
	blur
	submit
	change
	click

找的代码（做了一点修改）

<html>
	<head>
		<meta charset="UTF-8">
		<title>常见事件</title>
		<style type="text/css">
			#e02{
				border: 1px solid #000000;
	  			height: 200px;
	 			width: 200px;
			}
			
		</style>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#e01").blur(function(){
					$("#textMsg").html("文本框失去焦点：blur");
				}).focus(function(){
					$("#textMsg").html("文本框获得焦点：focus");
				}).keydown(function(){
					$("#textMsg").html("键盘按下：keydown; ");
				}).keypress(function(event){
					var event = event || window.event;
					$("#textMsg").append("键盘按：keypress("+String.fromCharCode(event.keyCode)+"); ");
				}).keyup(function(){
					$("#textMsg").append("键盘弹起：keyup");
				});
				
				
				
				var i = 0;
				$("#e02").mouseover(function(){
					$("#divMsg").html("鼠标移上：mouseover");
				}).mousemove(function(){
					$("#divMsg").html("鼠标移动：mousemove , " + i++ );
				}).mouseout(function(){
					$("#divMsg").html("鼠标移出：mouseout");
				}).mousedown(function(){
					$("#divMsg").html("鼠标按下：mousedown");
				}).mouseup(function(){
					$("#divMsg").html("鼠标弹起：mouseup");
				});
				
				$("#e03").click(function(){
					$("#buttonMsg").html("单击：click");
				}).dblclick(function(){
					$("#buttonMsg").html("双击：dblclick");
				});
				
			});
		</script>
		
	</head>
	<body>
		<input id="e01" type="text" /><span id="textMsg"></span> <br/>
		<hr/>
		<div id="e02" ></div><span id="divMsg"></span> <br/>
		<hr/>
		<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
	</body>
</html>

选择器总结:

基本选择器★
	$("#id值")  $(".class值")  $("标签名")  
	了解:$("*")
	理解:获取多个选择器 用逗号隔开
		$("#id值,.class值")
层次选择器 ★
	a b:a的所有b后代
	a>b:a的所有b孩子
	a+b:a的下一个兄弟
	a~b:a的所有弟弟
基本过滤选择器:★
	:frist 第一个
	:last 最后一个
	:odd  索引奇数
	:even 索引偶数
	:eq(index) 指定索引
	:gt(index) >
	:lt(index) <
内容过滤:
	:has("选择器"):包含指定选择器的元素
可见过滤:
	:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
	:visible 
属性过滤器:★
	[属性名]
	[属性名="值"]
表单过滤:
	:input  所有的表单子标签  input select textarea button

属性和css操作总结:

对属性的操作:
	attr():设置或者获取元素的属性
		方式1:获取
			attr("属性名称")
		方式2:设置一个属性
			attr("属性名称","值");
		方式3:设置多个属性  json
			attr({
				"属性1":"值1",
				"属性2":"值2"
			})
	removeAttr("属性名称"):移除指定属性
//添加class属性的时候 
//	attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");

对css操作:操作元素的style属性
	css():获取或者设置css样式
		方式1:获取	
			css("属性名")
		方式2:设置一个属性
			css("属性名","值")
		方式3:设置多个
			css({
				"属性1":"值1",
				"属性2":"值2"
			});
获取元素的尺寸:
	width()
	height()

文档操作:

内部插入
	a.append(c):将c插入到a的内部(标签体)后面
	a.prepend(c):将c插入到a的内部的前面
	
	appendTo
	prependTo
外部插入
	a.after(c):将c放到a的后面
	a.before(c):将c放到a的前面
	
	a.insertAfter(c)
	a.insertBefore(c)
删除
	empty() 清空元素
	remove() 删除元素

Dell.Chen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaweb学习记录04

JQueryjquery和html的整合:jquery是单独的js文件通过script标签的src属性导入即可获取一个jquery对象$("选择器") 或者 jQuery("选择器")dom对象和jquery对象之间的转换dom对象===>jquery对象 $(dom对象)jquery对象===>dom对象方式1: jquery对象[index] ...
复制链接

扫一扫

专栏目录