JQuery初级入门

62 阅读 0 评论 41 点赞

我是靠谱客的博主认真大叔，最近开发中收集的这篇文章主要介绍JQuery初级入门，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery简介
jQuery相当于将JavaScript封装好了，可以拿来直接用，强调写的更少，做的更多，但因为是封装好的半成品，有很多东西可能用不到，也突出了效率低的缺点

JavaScriptDOM取得的是一个对象
jQuery取得的是一个集合
JavaScript使用属性操作页面属性
jQuery使用方法操作页面属性

转换
jQuery转为DOM对象 $(“p”)[0]
DOM转为jQuery对象 $(DOM对象)

jQuery常用方法
注意点：使用jQuery时一定要导包，若使用js，且要在引用js前导包

页面加载完才执行方法

$(function () {

});

通过ID选择器获取标签名

<span id="a">我是文本</span>
<script type="text/javascript">
	$(function () {
		var a=$("#a")[0].tagName;
		alert(a);
	});
</script>

类选择器

$(".aa");

标签选择器

$("span")

取得文本框value

<script type="text/javascript">
	$(function () {
		var a=$("#aa").val();
		alert(a);
	});
</script>

给文本框赋值

<input id="aa" type="text" value="kkk">
<script type="text/javascript">
	$(function () {
		var a=$("#aa").val("bbb");
	});
</script>

总结：操作文本可用text()方法，
操作css可用css()方法，
操作其他属性可用attr()方法，
无参数为取值，有参数为赋值，
若为多个值可用（“属性名”：“属性值”，“属性名”：“属性值”）

jQuery事件
实例：

<input id="a" type="button" value="按钮">
<script type="text/javascript">
	$(function () {
		$("#a").bind("click",function () {
			alert("成功触发事件");
		});
	});
</script>

<span id="a">文字</span>
<script type="text/javascript">
	$(function () {
		$("#a").hover(function () {
			$(this).css("color","red");
		},function () {
			$(this).css("color","blue");
		});
	});
</script>

submit提交事件
bind多次性可触发事件
one一次性触发事件
hover鼠标滑过事件
toggle多个事件

常用jQuery选择器
实例：
$(“span”：first)选中第一个
基本选择器
last选中最后一个
not排除什么
even选中偶数位，从下标0开始计数
odd选中奇数位
根据文字内容选择器
jQuery.contains(document.documentElement, document.body)
过滤选择器
$(“div”).children(".selected")
属性选择器
$(“input[type=button]”)