jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（一）

文章目录

1.基础语法

Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

2.入口函数

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

简洁写法（与以上写法效果相同）:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

3.jQuery选择器

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 < p> 元素:$(“p”)

用户点击按钮后，所有 < p> 元素都隐藏：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：$（"#test"）

当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('button').click(function(){
				$('#test').hide()
			});
		});
	</script>
</head>
<body>
	<h2>这是一个标题</h2>
	<p>这是一个段落</p>
	<p id="test">这是另一个段落</p>
	<button>click me</button>
</body>
</html>

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：
$(".test")

实例

用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
实例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>

$(":button") 为 jQuery 中表单选择器（貌似与过滤选择器同级），旨在选择所有的按钮，所以会找到 < input type=“button”>、< button> 元素；
而 $(“button”) 则为基本选择器，旨在选择为 < button> 的标签。

:即为 jQuery 的过滤选择器，语法类似于 css 中的伪类选择器；
其过滤选择器大概可以分为基本过滤（p:first 之类）、内容过滤（:empty）、子元素过滤(:first-child)和属性过滤[href] 选择器。

其他实例

$("#id", ".class")  复合选择器
$(div p span)       层级选择器  div下的p元素中的span元素
$(div>p)            父子选择器  div下的所有p元素
$(div+p)            相邻元素选择器  div后面的p元素(仅一个p)
$(div~p)            兄弟选择器   div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        内容过滤选择器，包含text内容的p元素
$(":emtyp")        内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       所有隐藏元素 visible 
$("input:enabled") 选取所有启用的表单元素
$(":disabled")     所有不可用的元素
$("input:checked") 获取所有选中的复选框单选按钮等
$("select option:selected") 获取选中的选项元素

4.独立文件中使用jQuery

如果网站包含许多页面，希望 jQuery 函数易于维护，那么把的jQuery 函数放到独立的 .js 文件中。

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

5.事件

事件是什么

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在元素上移动鼠标。
选取单选按钮
点击元素
常见DOM元素

语法

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常见的jQuery事件方法

dblclick()

当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$("p").dblclick(function(){
				$(this).hide();
			});

		});
	</script>
</head>
<body>
	<p>双击我就消失了</p>
	<p >双击我也消失了</p>
	
</body>
</html>

点一点就不见了

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$("p").mouseenter(function(){
				alert("鼠标移到我上面了！")
			});

		});
	</script>
</head>
<body>
	<p>111111</p>
	<p >1111111</p>
	
</body>

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$(document).ready(function(){
			$("p").mouseleave(function(){
				alert("鼠标走掉了")
			});

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

$(document).ready(function(){
			$("p").mousedown(function(){
				alert("鼠标按到我了！")
			});
			});

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数

$(document).ready(function(){
			$("p").mouseup(function(){
				alert("我被鼠标松开了！")
			});

		});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('p').hover(
				function(){
					alert("进来了");

				},
				function(){
					alert("你走了，再见见");
				}
				)
		});
	</script>
</head>
<body>
	<p>这是要进入的区域</p>	
</body>

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('input').focus(function(){
				$(this).css("background-color","#cccccc");
			});
			$("input").blur(function(){
				$(this).css("background-color","#ffffff")
			});
		})
	</script>
</head>
<body>
	NAME:<input type="text" name="fullname"><br>
	EMAIL:<input type="text" name="email">
</body>
</html>

鼠标点击输入框内聚焦，失去焦点还原

keypress,keydown,keyup的区别:

1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;

2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){
   // 通过event.which可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.
} );

案例2:传递数据给事件处理函数

jQueryObject.keypress( [[ data ,] handler ] );

data: 通过event.data传递给事件处理函数的任意数据;
handler: 指定的事件处理函数;

举例:

// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.

var validKeys = { start: 65, end: 90  };
$("#keys").keypress( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

1. 获取事件对象

$(document).ready(function(){
$(window).keypress(function(event){
//获取事件对象，里面包含各种有用的信息。
console.log(event);
//console.log(event.which);
});
});

2. keypress事件获取键入字符

$(window).keypress(function(event){
//event.which是获取ASCII码，前面的函数是将ASCII码转换成字符，空格键和Enter键输出均为空白。
console.log(String.fromCharCode(event.which));
//从event对象中key属性获取字符，但是Enter键的key值为"Enter"，空白键还是空白" "。
console.log(event.key);
});

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（一）

文章目录

1.基础语法

2.入口函数

3.jQuery选择器

元素选择器

id 选择器

class 选择器

其他实例

4.独立文件中使用jQuery

5.事件

事件是什么

语法

常见的jQuery事件方法

web前端開發筆記整理（五）

LIUNX自測基礎命令測驗題目+考覈點（三）

Js_Data對象，定時器,腳本化css

jQuery實現tab欄切換（附上代碼）

web前端開發筆記整理（四）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結