Jquery基础01

<div id="div1">124</div>
	<ul>
		<li class="item">列表1</li>
		<li class="item" style="display: none;">列表2</li>
		<li class="item" style="visibility: hidden;">列表3</li>
		<li class="item">列表4</li>
		<li class="item">列表5</li>
	</ul>
	<!--表单控件的disabled属性, 也可以控件禁用-->
	<input type="text" />
	<input type="password" disabled="disabled"/>
	<input type="checkbox" checked/>
	<input type="radio" disabled="disabled" checked/>
	<input type="reset" disabled="disabled"/>

jQuery是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等操作变得更加简单。

jQ的1.x.x 支持ie的版本, ie678 

jQ的2.x.x 不支持低版本ie, 最稳定版本

jQ的3.x.x 不支持低版本ie, 最新版

1. JQ选择元素   2. JQ操作DOM元素  3. JQ动画

一 丶 JQ获取元素

语法: ${"选择器"}  返回值: jq对象

牢记: 只要$()方法得到的永远是jquery对象, 不再是之前的DOM对象, 而jquery对象有自己的方法或者属性, 不能再用之前操作DOM对象的写法去操作jquery对象!!!

1. 操作jquery对象的css样式

该方法既可以

设置样式     方法: css("样式名", "样式值")  

获取样式     方法: css("样式名")  返回值: 获取到的样式值

一次设置多个样式      css({样式名:样式值, 样式名:样式值});

divObj.css("font-size", "50px");
divObj.css({
    backgroundColor:"red",
    width:"100px",
    height:"100px",
    lineHeight:"100px",
    textAlign:"center"
})

注意: 如果jq对象有多个元素, 获取样式时只获取第一个元素的样式值

jq对象和DOM是可以相互转化的

1. jq对象转成DOM元素, 从jq对象里通过下标取出的就是DOM元素

2. DOM元素转成jq对象, 将DOM对象直接放进$()方法里, 返回的就是jq对象

var divObj = $("#div1");
console.log(divObj);
divObj[0].style.background = "red"; // jq对象转DOM对象
divObj.css("list-style", "none")

var divEle = document.getElementById("div1"); // 创建DOM节点
console.log(divEle);
$(divEle).css("background-color", "red") // DOM元素转jq对象
console.log($(divEle));

jq里常用伪类选择器

:first 找到jq里的第一个子对象

$("ul>li:first").css("background-color","red");

:last  找到jq里的最后一个子对象

$("ul>li:last").css("background-color","yellow");

:even  找到jq对象里的序号为偶数的对象, 序号为0开始

$("ul>li:even").css("background-color","green");

:odd   找到jq对象里的序号为奇数的对象, 序号为0开始

$("ul>li:odd").css("background-color","red");

:eq(index) 找到jq对象里序号为index的对象, 序号从0开始

$("ul>li:eq(2)").css("background-color","red");

:gt()  找到jq 对象里的序号大于index的对象, 序号从0开始

$("ul>li:gt(2)").css("background-color","yellow");

:lt()  找到jq 对象里的序号小于index的对象, 序号从0开始

$("ul>li:lt(2)").css("background-color","blue");

:hidden 找到jq对象里的隐藏的对象(display:none)的元素

console.log($("ul>li:hidden"));

:visible  找到jq对象里显示(非display:none)的元素

console.log($("ul>li:visible"))

:enabled  找的是可用的表单控件

console.log($("input:enabled"))

:disabled 找的是不可用的表单控件

console.log($("input:disabled"))

:checked  找的是选中的表单控件

console.log($("input:checked"))