jQuery基础篇1

一：Jquery基础
1、Jquery是一种框架，对于浏览器的兼容问题，95%就不用去考虑啦!!!


2、Jquery利用选择器(就是跟css那个id和class的选择差不多id前边加.还是#我忘了)查找要进行操作的那个节点，
  然后再把这些节点封装成一个jquery对象，(封装的目的有两个①是为了解决不同浏览器的兼容问题，②是为了简化代码)
  通过调用你封装的jquery对象的方法或者是属性实现对节点的操作。


3、jquery开发的步骤：
1.要先引入jquery框架，也就是那个js文件，俺当时用的是jquery-1.4.2.js
<script type="text/javascript" src="../js/jquery-1.4.2.js">
2.使用选择器查找要进行操作的节点(该节点会被封装成一个jquery对象)
var con = $('li:gt(2)').not('li:last').hide();(昨天你给我发的第8个页面，其中con就是被封装的jquery对象)
3.调用jquery对象的方法或者属性进行操作
con.slideToggle(80);(这就是调用jquery对象的方法进行操作，就是那个显示和隐藏之间进行切换)


4、jquery对象与Dom对象转换
1.Dom转换Jquery使用函数：$(dom对象) 
例如：
function f() {
var obj = document.getElementById('一个id值');//obj是一个dom对象
var $obj = $(obj);//将dom对象封装成了jquery对象
$obj.html("hello java");
}
jQuery包含很多供改变和操作HTML的强大函数(重点)。上边用的.html是改变所匹配的 HTML 元素的内容的；
$(selector).html(内容)改变被选元素的（内部）HTML 
$(selector).append(内容)向被选元素的（内部）HTML 追加内容 
$(selector).prepend(内容)向被选元素的（内部）HTML “预置”（Prepend）内容 
$(selector).after(内容)在被选元素之后添加 HTML 
$(selector).before(内容)在被选元素之前添加 HTML 

2.Jquery中转换成Dom对象(这个我也不是太清楚，先记住就这样用就行啦)
方式一：$obj.get(0);
方式二：$obj.get()[0];




二：Jquery选择器：
选择器就是模仿css选择器的语法提供了一种用来方便查找要操作的节点的语法规范。


选择器包括：
基本选择器
层次选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
表单选择器




1、基本选择器都有哪些?
1.id选择器#id $('#id值')
2.类选择器.class $('.class值')
3.元素选择器element $('元素名称') 如：$('button')也叫标签选择器
4.选择器合并 就是对个选择器之间用逗号隔开，css也有这种，如：$('#1,.2,p')这就是说选择id为1的，class为2的还有p标签
5.所有选择器* $('*')


当选择器查找到了多个Dom节点时，还是封装成一个jquery对象，在调用jquery独享的属性或者方法时，默认情况是
作用于其下的所有Dom节点上


元素选择器$("标签名字")
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。




$(document).ready(function(){
$("button").click(function(){

});
这段函数的意思是把页面中的元素加载完再执行里面的function()!
为什么要这样呢？
因为html是从上到下解析的，
如果先执行
function()
{$("button").click(..)
}
此时这个button还没被加载，就是还不存在呢，所以要把页面元素加载完再执行function()


2.层次选择器
<div id="d1">
<div id="d2">hello 1</div>
<div id="d3" style="width:200px;height:200px;background-cplor:red;">
<div id="d4" style="width:200px;height:200px;background-cplor:silver;>hello 2</div>
</div>
<div id="d5">hello 3</div>
</div>
<input type="button" value="层次选择器的使用" onclick="f1();"/>


1.所有后代：
$('#d1 div').css('font-size','60');//d2,d3,d4,d5都变
2.只考虑子节点，孙子不管
$('#d1>div').css('font-size','60');//d2,d3,d5变,d4不变
3.下一个兄弟节点，儿子不管
$('#d3+div').css('font-size','60');//只有d5变
4.下面所有的兄弟，上边的不管，儿子也不敢，兄弟中的儿子也不管
$('#d2~div').css('background-color','yellow');//d3,d5变


3.基本过滤选择器
1. :first第一行
2. :last最后一行
3. :not把满足要求的选择器排除在外
4. :even偶数行，下标从0开始
5. :odd奇数行，下标从0开始
6. :eq(index)等于下标的元素，下标从0开始
7. :gt(index)大于下标的元素，下标从0开始
8. :lt(index)小于下标的元素，下标从0开始
注意：过滤器前是没有空格的。是xx:first而不是xx :first。