jQuery基础一

1.jQuery简介

    jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。

    jQuery下载的时候有两个版本：两个版本内容无区别

    jquery-1.8.3.js：非压缩版，开发、测试时使用的版本，占用内存大一点

    jquery-1.8.3.min.js：压缩版，开发完发布时使用的版本，占内存小，eclipse会报错

 

    1.2）jQuery程序

     一般的jQuery程序由两个<sctipt>标签组成，第一个<script>导入外部jQuery文件，第二个标签里书写jQuery代码

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
	$(function(){
		alert("hello jquery!");
	});
</script>

    页面加载完毕即执行的function事件，必写

$(function(){
	});

    

    1.3）JQ的引入：src后面即.js文件地址

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

 

    1.4）JQ与JS的区别

 

    JS：加载有覆盖问题（相同事件后一个会覆盖前一个），加载比jQ慢

    JQ：加载没有覆盖问题，加载快（顺序执行），代码简洁，大量使用了"$"符号

    

    1.5）JQ的获取（通过id）

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
	$(function(){
		$("#btn").click(function(){
			location.href="https://www.baidu.com/"
		});
	});
</script>

    

2.jQuery对象和DOM对象的转换

    jQuery对象和DOM对象的代码不能混合使用，以及jQuery只能使用自己的函数

    DOM对象转换成jQuery对象，语法：jQuery(dom对象)

    jQuery对象转换成DOM对象，语法：$username[角标]

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			function write1(){	
				var spanEle = document.getElementById("span1");
				//将DOM对象转换成JQ对象
				$(spanEle).html("思密达");
			}
			$(function(){
				$("#btn").click(function(){
					//JQ对象向DOM对象转换方式一
					$("#span1").get(0).innerHTML="美美哒！";
	
					//JQ对象向DOM对象转换方式二
					$("#span1")[0].innerHTML="棒棒哒！";
				});
			});
		</script>

<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长：<span id="span1">你好帅！</span>

 

3.jQuery选择器（划重点）

    jQuery选择器：基本选择器，层级选择器，基本过滤选择器，属性选择器，表单选择器

 

    3.1）基本选择器：id选择器，类选择器，元素选择器，通配符选择器，多个选择器共用（并集）

    id选择器：$("#id名称")

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","pink");
				});
			});
		</script>

 

    类选择器：$(".类名")

 

$(".mini").css("background-color","pink");

 

    元素选择器：$("元素名称")，标签名称

 

$("div").css("background-color","pink");

 

    通配符选择器：$("*")，选取看整个页面所有元素 html body....

 

$("*").css("background-color","pink");

 

    多个选择器共用：$("#id名称,.类名")，选取id且类名为多少的标签

 

$("#two,.mini").css("background-color","pink");

    

    3.2）层级选择器：后代选择器，子选择器，同桌选择器，兄弟选择器

 

    ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

$("body div").css("background-color","gold");

 

    parent > child : 在给定的父元素下匹配所有的子元素(儿子) 

 

$("body>div").css("background-color","gold");

 

    prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

$("#two+div").css("background-color","gold");

 

    prev ~ siblings: 匹配prev 元素之后的所有 siblings 元素(兄弟)

 

$("#one~div").css("background-color","gold");

 

    3.3）基本过滤选择器

    first：选出第一个元素，此处代码先使用了层级选择器中的后代选择器

$("body div:first").css("background-color","red");

    last：选出最后一个元素，此处代码先使用了层级选择器中的后代选择器

$("body div:last").css("background-color","red");

    odd：选取角标为奇数的所有元素，此处代码先使用了层级选择器中的后代选择器

$("body div:odd").css("background-color","red");

    even：选取角标为偶数的所有元素，此处代码先使用了层级选择器中的后代选择器

$("body div:even").css("background-color","red");

 

    3.4）属性选择器

    [attribute]：获得有属性名的元素

$("div[id]").css("background-color","red");

    [attribute=value]：获得有属性名等于value的元素

$("div[id='two']").css("background-color","red");

    [attribute!=value]：获得有属性名不等于value的元素

$("div[id!='two']").css("background-color","red");

 

    3.5）表单选择器

    :checkbox：查找所有复选框

$(":checkbox").css("background-color","red");

 

    3.6）表单对象属性选择器

    :selected：筛选出选中的下拉列表

$("#select option:selected").css("background-color","red");

 

 

 

4.jQuery的一些常用方法或属性

    addClass()：为标签添加指定的类名

$("tbody tr:even").addClass("even");//同等于[ <p class="even">Hello</p> ]在style.js外部样式中已经定义好了有“even”的class

    removeClass()：为标签删除指定的类名

$("tbody tr:even").removeClass("even");

    this：当前对象的

//全选和全不选：获取下面所有复选框，并把他们设置和第一个复选框同样的状态
$("tbody input").prop("checked",this.checked);