*J Query*
*J Query*
*第一章 初识JQuery*
1，获取网页元素，
$(document).ready(function(){})//文档对象调用准备方法（函数来实现功能） 文档对象.准备方法
2，<script type="text/JavaScript" scr="jquery-1.7.js"></script>
<--
$(document).ready(
function(){
alter("这是我的第一个JQuery");
}
)
-->
</script>
a,实现功能获取网页元素
b，设置网页外观
c，更改网页内容
d，响应用户操作
e，添加动画效应
f，实现ajax交互
--------------------------------------------------------------------
*二，属性*
优点
1，跨浏览器兼容性
2，轻量级
3，基于css选择器
4，链式操作
5，面向集合
6,详细的文档
7，丰富的UI控件
8，与其他JavaScript库共存
9，免费开源
*三，书写规则*
1，全写形式$(document).ready(function(){})
2，简写形式$(function(){})
3,
window.onload//JS代码格式
窗口（体）对象调用加载事件
onmouserover--JS鼠标移到事件
onmouserout---JS鼠标移出事件
onclick ----- JS鼠标单击事件
ondblclick----JS鼠标双击事件
onload--------JS加载事件
2，$(document).ready()//JQ格式
$获取文档对象调用准备方法
1，效率高2，可以写多次每次结果也不尽相同3，
mouseover--JS鼠标移到事件
mouseout---JS鼠标移出事件
click ----- JS鼠标单击事件
dblclick----JS鼠标双击事件
＊＊＊＊＊＊三;访问ＤＯＭ对象从网页表单获取内容提交＊＊＊＊＊＊
１测试文本
例子１：
document.getElementById("");
文本档对象 获取 成员 基于ID号(网页元素的ID)
2,innerHTML
即按照html获取的内容内嵌
l1
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
//以下是js实现手段
通过下面的JavaScript代码就可以访问DOM对象和获取或设置其内容值
var tDiv = document.getElementById(“divTmp”);//获取DOM对象
var oDiv = document.getElementById(“divOut”);//获取DOM对象
var cDiv = tDiv.innerHTML;//获取DOM对象中的内容
oDiv.innerHTML = cDiv; //设置DOM对象中的内容
//以下是JQ实现手段
var tDiv = $(“#divTmp”); //获取jQuery对象
var oDiv = $(“#divOut”); //获取jQuery对象
var cDiv = tDiv.html(); //获取jQuery对象
oDiv.html(cDiv); //设置jQuery对象中的内容
</script>
<div id=“divTmp”>测试文本</div>
<div id=“divOut”></div>
*****四，JQ控制页面 css*******
1,书写格式
$("某网页元素").addClass("样式名（不加点了）")；
添加样式表
2，$("某网页元素").toggleClass("样式名（不加点了）").html("<img src='img/xx.jpg'>")；
#abc 切换 样式 并换个图片
*****************五，JQ选择器******************************
1，代码更简单
2，完善的检测机制
一，选择器类别、
1基本选择器
2内容过滤选择器
3
1,#id选择器----------------------------->单个元素
2,$("a")--------------------------------->成员选择器根据名称匹配所有元素选择的是元素集合
3,$("*")——————————-------》匹配所有元素
4,$("selector1,selectorN")--------------》将每个选择器匹配到的元素合并后一并返回元素集合
5,$(".div")class类选择器———————》元素集合
6,
7,
******************************二,层次选择器***************************************************************
嵌套关系
1，爷(后加“ ”)孙关系后面加空格,选择嵌套的所有子元素
2，父(后加>)子关系,选择紧接着的嵌套的子元素
非嵌套关系
3,兄(后加+)弟关系紧接着的情况
4,平级关系(后加~)相邻之后所有的兄弟关系
******************************三，过滤选择器***********************************************************
选择器 功能 返回值
first( )或 :first 获取第一个元素 单个元素
last( )或:last 获取最后一个元素 单个元素
例1，$(li(某元素：first)
$(li:某元素：last)
:not(selector) 获取除给定选择器外的所有元素 元素集合
:even 获取所有索引值为偶数的元素,索引号从0开始 元素集合
:odd 获取所有索引值为奇数的元素,索引号从0开始 元素集合
:eq(index) 获取指定索引值的元素,索引号从0开始 单个元素
$()
:gt(index) 获取所有大于给定索引值的元素,索引号从0开始 元素集合
:lt(index) 获取所有小于给定索引值的元素,索引号从0开始 元素集合
:header 获取所有标题类型的元素,如h1,h2… 元素集合
:animated 获取正在执行动画效果的元素 元素集合
*****************************四，内容过滤选择器***************************************************************
1，contains(text)
$("td.contains('要要索引的字符')")
2, 选择器 功能 返回值
:contains(text) 获取包含给定文本的元素 contains—包含,容纳
如果查找的是字母,则有大小写的区别 元素集合
:empty 获取所有不包含子元素或者文本的空元素 元素集合
$("div:empty")
:has(selector) 获取含有选择器所匹配的元素的元素 元素集合
$("div:has(a)")
:parent 获取含有子元素或者文本的元素 元素集合
$("div:parent")
实例：
********************************五，可见性过滤选择器*****************************************************
hidden:获取所有隐藏元素
visible：获取所有显示元素show(5000)hide(5000)
*****************六，属性过滤选择器*******************************************************、
$(size)
$("div[title='ab']")固定
$("div[id!='a']")div含有非a元素的
$("div[title^='a']")开头
$("div[title$='b']")以b结尾
$("div[title*='a']")包含
$("div[id='a'][title='b']")合并属性
$("div[title*='l']")
***************************七,子元素过滤选择器***************************************************************
根据父元素进行过滤
li:nth-child(索引号&even(偶数)odd(奇数)eq(3n(+1)既是三的倍数)index(""))返回的是个元素集合
li:first-child
li:last-child
li:only-child
*************************八，表单对象属性过滤选择器*********************************************************
:enabled 获取表单中所有属性为可用的元素 元素集合
:disabled 获取表单中所有属性为不可用的元素 元素集合
:checked 获取表单中所有被选中的元素 元素集合
:selected 获取表单中所有被选中option的元素 元素集合
**********************九，表单元素过滤器*************************************************************************
选择器 功能 返回值
:input 获取所有input,textarea,select 元素集合
:text 获取所有单行文本框 元素集合
:password 获取所有密码框 元素集合
:radio 获取所有单选按钮 元素集合
:checkbox 获取所有复选框 元素集合
:submit 获取所有提交按钮 元素集合
:image 获取所有图像域 元素集合
:reset 获取所有重置按钮 元素集合
:button 获取所有按钮 元素集合
:file 获取所有文件域 元素集合
attr("属性"."属性值")
$("img").attr("src","xxx.jpg")
******************************第三章，JQuery操作DOM*********************************************
l1:
$(function(){
var color=$("font").attr("color");
var src=$("img").attr("src");
var width=$("img").attr("width");
alert("字体颜色是"+color);
$("#diva").html("上面的图片名是:"+src+"</br>"+height);
})
多属性设置方法:
attr( ｛key0 : value0 , key1 : value1 ｝)
attr(参数) 表示获取该参数的属性值
attr(参数1,参数2) 表示第二个参数值将作为第一个参数的属性值
Math floor() 这个函数表示取整数
Math randmo() 这个函数表示随机返回值
$("").removeAttr("参数")
XHTML相较HTML较为严格
******************************************1,网页文本值的获取元素内容的操作************************
val().join(",")-->表示在之后加入一个逗号
str.length<1-->表示长度小于一
l1:
<select id="sel" multiple="multiple" size="10">
$(function()
{
var strHTML = $("#divShow").html(); //获取HTML内容
var strText = $("#divShow").text(); //获取文本内容
$("#divHTML").html(strHTML); ////设置HTML内容
$("#divText").text(strText); ////设置文本内容
})
****************************2,元素样式操作******************************************************
$("input:eq(1)").val();
$("input(2)").focus();//焦点，得到光标
return false；//中断提交
下拉列表触发事件为change；
this指针
b,增加样式类别 addClass("")
********************************3,类别切换***********************************************
.toggleClass("类名")如果有删除，没有则添加
$("某元素").css("该元素某属性","属性新值");//直接定义样式
$("某元素").toggleClass("该元素某属性","属性新值");//切换样式
$("某元素").addClass("该元素某属性","属性新值");//添加样式
*******************创建节点元素*************************************
$("td").$("<img src=''>")
append:追加
var $div=$("<div></div>")
$("父元素").append($div)
***************************插入节点元素****************************
1内部添加节点；
$("父级元素").append("abc") <div>马吃 abc </div>
$("父级元素").prepend("abc") <div> abc 马吃 </div>
$("某子元素").appendTo("某父元素")；插入到节点之后
$("某子元素").prependTo("某父元素")；插入到节点之前
*************************外部插入节点***************************
after：在。。。之后 $("").after("")
before：在。。。。之前$("span").before(abc)
*************************复制节点*****************************
clone("")只有第一个能复制
clone(ture)任何都能点复制
**************************替换节点***************************
replaceWith
替换节点 (后面替换前面)$("div").replaceWith("<span>abc</span>");
replaceAll
替换所有(前面替换后面)$("<span>abc</span>").replaceAll("div");
**************************动态出创建节点元素***********************************
<div>我是红色</div>
$("div").wrap("<font color='red'></font>")
unwrap():解包
**********************each**********************************
********************删除元素**************************************************
remove()删除节点，最彻底
empty()清空所选择的页面元素
第四章 jquery事件应用
阻止冒泡return false；
绑定事件：$("body, div,#btn").click(function()
{
})
bind事件：
$("某元素").bind("事件1 事件2 事件3"，function（）{
})
3，映射事件
$("某元素").bind(
事件1：function（）
{}，
事件2：function（）
{}，
事件3：function()
{}.....
)
4:切换事件
hover（）
$("a").hover(function（）{}，function（）{})；
toggle（）单击
这个是依次调用
5，移除事件
unbind()移除绑定所有事件或某一个事件
注：
可以利用绑定来调用自定义函数；disabled按钮变灰
enabled按钮恢复
trigger（）方法 触发器这个会自动执行
triggerHandler()方法不会自动触发
************************** 第五章：Jquery动画 *******************************************
动画效果的显示功能: show(speed,[callback]);
动画效果的隐藏功能: hide(speed,[callback]);
以上方法中的参数speed表示执行动画时的速度,该速度有3个默认字符值:
“slow” 对应速度是 0.6秒
“normal” 对应速度是 0.4秒
“fast” 对应速度是 0.2秒
2,滑动效果
slideDown()
slideUp()
3,轮换滑动
4，淡入淡出
fadeIn()
fadeOut()
fade To()
5,自定义动画
animate
使用驼背写法：font-size--> fontSize
并且用定位
1，移动位置动画
2，队列中的动画
**************************第六章 ，Ajax****************************
document.write("")
//文档对象调用写方法
windows.alert("dk");
//窗口对象调用提示框
JSON
[
{"名称":"值"，"名称":"值"},
{"名称":"值"，"名称":"值"}
]
名值对（关联数组）
利用全局函数$.getJSON()-->获取.json格式（往往是其他语言生成的）
$.each遍历获取内容
$.getScript('js文件名'，function（）)
var='内容'
全局函数get()调用语法
定位光标focus()
$.get("url",{k(要传的值名)：v(文本框的值)},function(data)（回调函数拉回数据）
{
$("").empty().html();
})
.length<1
get 缺点:不安全，长度有限 优点是：快
POST：缺点：慢 优点：安全，可传输数据量大，能发送视频图片等格式文件
$.ajax()最强悍
$.ajax(//其内部格式为k/v格式
{
url："",//地址
dataType:"",//返回的数据格式
data:{name:strname,},
success:function(data)
{
}
})
<img src="powerbookg4.jpg" class="ban_touming"
onmouseover="this.style.MozOpacity=1; //鼠标放上去时候显示为不透明
this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5; //鼠标离开时候恢复到半透明
this.filters.alpha.opacity=50">
图片半透明样式：
.ban_touming{
opacity: 0.5; //-moz-opacity:0.5; ff和oper等浏览器下的半透明
filter:alpha(opacity=50); //IE下的半透明
}
