前端jq总结
选择器**********************************************************************
1,基本选择
器
#id
.clss
element dom元素
[selector1,selector2]
*
------------------
2，层级选择器
ancetor descendant 匹配祖先下的所有后代元素
parent》child 匹配父元素下面的所有儿子元素
prev+next 匹配prev紧挨着的next元素。平级平辈的。向下的紧挨着的元素
prev~siblings 匹配prev所有平辈元素，只能是向下的，弟弟级的，不能是向上
sibling 哥哥级的
-----------------
3,简单选择器
:first 第一个 $("li:first").html("第一个");
:last 最后一个 $("li:first").html("最后一个");
:even 偶数 $("li:first").html("偶数");
:odd 奇数 $("li:odd").html("奇数");
:eq(index) 下标 $("li:eq(3)").html("第四个li变");
$("li:eq(3),li:eq(5),").html("第四个li变");
:gt(index) 大于下标 $("li:gt(3)").html("大于四的li都变");
:lt(index) 小于下标 $("li:lt(3)").html("小于四的li都变");
:not(select） 除了这个选择器的其他元素
$("li:not(eq(3))").html("除了下标为3的其他元素);
------------------
4,内容选择器
:contains(text) 指定值 $("li:contains('国')").html（“国的地方改为这些”);
:empty 内容为空 $("li:empty").html（“空的地方显示字”);
:has(selector) 内容中包含指定选择器$("li:has('a')").html（“li里面包含a的内容”);
:parent 内容不为空 $("li:parent").html（“内容不为空的地方显示字”);
------------------
5,可见性选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素//.show(3000)显示元素方法.hide(3000)显示元素 $("li:hidden").show
:visible 匹配所有的可见元素$("li:visible").hide() .toggle(3000)慢慢的显示，和隐藏
-----------------
6，属性选择器
[atttibute]; 指定属性的内容 $("div[id]")查找所有含有 id 属性的 div 元素
[atttibute=value]; 指定属性值为 $("div[color=#ff]")，
[atttibute!=value]; 指定属性值不为
[atttibute^=value]; 指定属性值开头
[atttibute$=value]; 指定属性值结尾
[atttibute*=value]; 包含指定属性值
[selector][selector][selector] 满足所有$("input[id][name$='man']")找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
，复合属性选择器，需要同时满足多个条件时使用。
-----------------
-----------------
7,子元素选择器
:nth-child(index/even/odd):匹配父元素下索引为指定值，或者偶数，或者奇数，索引是从一开始的 $("li:nth-child(3)");所有父元素下，下标为2的li
:first-child:匹配父元素下第一个子元素
:last-child匹配在父元素下最后一个子元素
:only-child在父元素下面只有一个子元素，独生子女
table>tr*10>td{$}*10 加Tab //$自动排序，里面的内容。可以随意
----------------
8，表单选择器
:input 所有的表单元素 包含select和textarea
:text 匹配文本框 $(':text').val()
:password 密码框
:radio 单选框
:checkbox 复选框
:submit 提交按钮
:reset 重置按钮
:image 图像按钮
:button 普通按钮
:file 上传文件
input:hidden 隐藏域
-----------------
9,表单对象属性
:enabled 默认可用的元素
:disabled 匹配不可编辑的状态（课外。readonly可以传送给后台，和不可以传送给后台）
:checked 匹配选中的元素 radio checkbox
:selected 匹配选中的元素 select
--------------
$("table tr:eq("+变量+") td:eq("+变量+")").html("++")
$('li:eq(2)~li').html("erererwrw");
--------------
*****************************************************************
三，DOM对象与jQuery对象
通过$('选择器')获取到都是jQuery对象
通过get~~~获得的都是DOM对象
DOM对象是以数组元素添加到jQuery对象中-----------
jquery对象转换为dom对象--------
jquery[0]
jQuery.get(0)
$("div").click(function(){});
转为就是加下标或者get(0);
$("div")[0].onclick=function(){};
$("div").get(0).onclick=function(){};
dom对象转换为jQuery对象--------
$(dom对象)
var dom_obj=document.getElementById("div");
$(dom_obj).toggle(3000);
----------------------
1，jQuery对标签属性的操作************
attr("name"): 获取到指定属性的值 $("img").attr("src")
attr("key","value"): 设置指定属性的值 $("img").attr("width","200")
attr(properties): 一次设置多个属性值，要求参数必须是一个json对象attr({src:"image/2.jpg","100"});
removeAttr("src");
2.jQuery对class属性的操作
addClass（"class"） 添加指定的class属性值
removeClass（"class"）移除指定的class属性值
toggoleClass（" "） 如果有指定的属性值，则删除，反之添加
class="class1 class2 class3 "
hasClass(class属性值)如果有指定的属性值，则返回true，反之，返回false
-----------------------------------------
3,jQuery对styl属性的操作
css("name") 获取指定的css样式的属性值
css（name,value） 设置指定的cass样式的值
css(properties) 一次设置多个属性值。必须是jsom写法
var data={backgroundColor:"#f00","500px;",height:"500px"}
css(data)
---------------------------------------
4,尺寸
width():获取指定元素的宽
width(value)设置指定元素的宽
height():获取指定元素的高
height(value)设置指定元素的高
-----------------------------------------
5，html 文本/值
html() 获取双边标记中的内容
html(value) 设置双边标记中的内容
val() 获取元素的value属性值
val(val) 设置元素的value属性值
text() 获取元素中文本内容，不包含标签
text（val） 设置元中文本内容，不包含标签
innerHTML和innerTEXT的区别
html()可以解析HTML标签
text()不可以解析HTML标签 有兼容性的区别
html("<font color='red'>测试</font>") html（)这个颜色会改变，也就是会解析html
text("<font color='red'>测试</font>") text()这个颜色不改变,也就是不会解析
*******************************************
五，事件编程
页面载入
js中所有操作都应该放在页面加载完成后再来操作
进行页面载入
jQuery是使用read(fn)的方法来进行加载
ready(fn)有三种方式
第一种
$(document).ready(function(){
});
第二种
$().ready(function(){
})
第三种
$(function(){ 只执行一次，所以定时器那些不能放在里面调用，闭包的原理
});
window.onload它与ready（fn）速度要慢一些，因为它是边加载边执行的
-----------------------------------
单边标记没有获取它的值的，因为它后面写的字是HTML内容。只能获取它的val
DOM对象是以数组元素的方式添加在jQuery对象中
select直接 把option写成字符串。然后加入
var $li=$('<li></li>') $li前面最好加个$.一这个是￥对象目了然。
----------------------------------------------------
一，事件编程***************************************
页面载入 read（fn）来进行页面加载$(this)
基本事件
事件切换
事件处理
--------------
1 基础事件
对象。事件=事件处理程序
对象。事件方法
jQuery去掉on前缀
blur（fn） 失去焦点时
change(fn)当内容发生改变
click（fn）当鼠标点击时
focus（fn）当获取焦点时
keydown(fn)当键盘按下时
load（fn）当页面加载完成时
mouseover(fn)当鼠标经过时 下面的hover可代替
mouseout(fn)当鼠标离开时 下面的out鼠标离开可以代替
change(fn)当内容改变时
scroll(fn)当滚动条滚动时
select(fn)当内容选择时
submit(fn)当表单提交时
js的话只能绑定一个事件。，因为后面会覆盖掉。而jq可以很多。
jQuery中this除了插件机制以外，都是指向dom的
-------------------
2，事件切换（）
hover(over,out):表示鼠标经过和鼠标离开
$("div".hover)(function(){},function(){});
over:鼠标经过
out：鼠标离开
参数要求是一个匿名函数
toggle(fn1,fn2,fn3....)当鼠标第一次单击时触发第一个fn，第二次单击时，触发第二个fn，以此类推
-------------------
3事件绑定
1.bind(type,[data],fn)对事件进行绑定,要求参数是个json对象
格式：0
参数说明
type：要绑定的事件，事件没有on前缀
fn：是指事件的处理程序
主要对事件进行绑定
$("div").bind('click',function(){
$(this).css("background","#aaa");
});
$("div").bind({
mouseover:function(){
$(this).css("backgroundColor","#ff0");},
mouseout:function(){
$(this).css("backgroundColor","#aaf");},
});
2.one(type,[data],fn)对事件进行一次绑定，只绑定一次
3，unbind([type])：对事件移除绑定
参数说明：type指事件名，如果不写，就代表移除所有的事件绑定
如果写了，代表移除指定的事件绑定。
$("#div").unbind('click');没参数代表移除所有的事件绑定
有参数代表移除指定的click事件
二·效果***********************************************
1基本效果
hide():将显示的元素隐藏起来
hide（speed，[callback]）:以动画的效果来隐藏，
show():将隐藏的元素显示出来
show（speed，[callback]）:以动画的效果来显示，
toggle():，切换，如果这个元素是显示，则隐藏，不然则显示
toggle(switch):如果这个switch是true则代表显示，不然则代表隐藏
toggle(speed,[callback]):以动画的效果显示或者隐藏
speed：是指动画的持续时间
它也可以使用英文单词来表示
slow：缓慢
normal：正常
fast:飞速
toggle("fast")
callback 动画执行完毕后，运行的函数（也就是回调函数）
------------------------
2 滑动效果
(speed,[callback])
它也可以使用英文单词来表示
slow：缓慢
normal：正常
fast:飞速
sideDown（）
向下滑动
点击事件，调用函数的首地址，hide ，就可以点击， 如果hide（）的话，不用点击，直接就打开了
sideUp
向上滑动
sideToggle 滑动切换
--------------------
3淡入淡出
fadeln()：淡入
fadeOut():淡出到指定值
fadeTo（）:淡入淡出到指定值
(speed,[callback])
它也可以使用英文单词来表示
slow：缓慢
normal：正常
fast:飞速
opacity 透明度 取值0-1,1显示，0隐藏，中的是半透明
-------------------------------------------------------------**]
*文档操作*********************************************************
插入
内部插入
append() 将内容插入到匹配元素内容的最后
appendTo() 将内容插入匹配的元素内容的前面
prepend() 把前面的加入到匹配的元素内容最后
prependTo() 把前面的追加到匹配的元素内容最前
------------
外部插入
after（content）将内容插入到匹配元素标签的外部的最后
before 将内容插入到匹配元素标签的外部最前
insertAfter 将匹配到的元素标签插入到元素的标签外部的最后
insertBefore 将匹配到的元素标签插入到元素的标签外部的最后
----------
2删除
empty（） 清空内容，保留标签
remove（）移除标签
detach()
----------
3.复制
clone([true])克隆
如果带true 克隆元素本身，同时将事件克隆
如果不带true，只克隆元素本身
------------
4替换,
replaceWith()替换 连同标签都替换。
var $div=$("<div></div>"); 创建节点
然后把 $div.html("内容")
replaceWith($div);
-----------
5包裹
wrap() 网易盖楼 对元素进行包裹wrap("<div></div>")
wrapAll（） 对所有元素进行包裹，只包裹一次
wralnner() 对元素进行内部包裹 包裹里面的东西
------------
6查找
eq(index) 匹配指定索引的元素
filter(expr) 过滤，缩小查找的范围
not(expr) 匹配除了指定元素以外其它的元素
next([expr]) 查找指定元素的下一个元素
prev([expr]) 查找指定元素的上一个元素
parent()
-------------------------------------------------------------------
插件机制
1提出问题
jQuery.fn.extend(object)或 $.fn.extend(object)
object必须是一个json对象
$.fn.extend({
fn1:function(){
},
fn2:function(){
}
});
$(function(){
$("div").bind("");
$("div").fn1();
});
for(var i=0;i<checkboxs_leng;i++){
checkboxs_obj[i].checked = !checkboxs_obj[i].checked
}
-------------
this如果是jQuery的话，就可以直接使用
如果是jQuery操心dom对象的话，就要转换为$(this)
HTML DOM操作************************************
1.查找节点----------------
通过jQuery选择器
2查找属性节点-------------
使用arrt方法
3创建节点-----------------
jQuery的工厂函数$()
$(html)方法会根据传入的html标记字符串。创建一个DOM对象
并将这个对象生成一个jQuery对象后返回
append()加入节点
$("<li title='香蕉'>香蕉</li>")
4创建节点属性---------
和创建节点类似
插入节点
append()
这些
5删除节点---------------
remove();
empty()
detach()
6复制节点-----------如购物网站的，选择购买，和拖动商品就等于复制商品
clone(true)
$(this).clone(true).appendTo("body")
7替换节点
replaceWith()和replaceAll();
8包裹节点
warp()
warpAll()
wraplnner()
----------------------------------------------------------
属性操作
设置属性 attr()
删除元素属性 removerAttr()
----------------------
样式操作
1.attr() 这个只能设置一个，多了会覆盖掉前面的
$("p").attr("class","high")
2追加样式 这个可以设置多的
addClass()
3，移除样式
removeClass()
4,切换样式
toggleClass()
5,判断是否有某个样式
hasClass()如果有则返回true，没有的话返回false
-------------------------------
html()
text()
val()
-------------------------------
遍历节点
1获取所有的子元素， children()方法 然后for
2 next() 方法 后面的同辈元素
3 prev()方法 前面的同辈邻居
4 siblings() 所有的同辈元素
5 closest() 取得最近的元素，不然向上，没有的话空的对象
6 parent()父级元素 parents()祖先元素
CSS-DOM操作****************************
1，css()方法
额外的
1 offset() 元素在当前视窗的相对偏移
var offset=$("p").offset();
var left=offset.left;
var right=offset.right;
2 position() 获取元素相对于最近的一个position样式属性
设置为relative或者absolute的祖先节点的相对偏移
var position=$("p").position();
var left=position.left;
var right=position.right;
3 scrollTop() 和 scrollLeft()方法
获取元素滚动条距离顶端的距离和距离左边的距离
***************************************
加载DOM
1 执行机制
老师讲的3个还有一个
$(window).load(function(){ })
等于 window.onload=function(){}
-----------------
2 事件绑定105页
bind()
可以把 click()和mouserover()和mouseout()绑定一起
----------------
3 合成事件
hover()鼠标悬浮事件
toggle()鼠标连续点击
---------------------
4 事件冒泡，比如div有点击事件，里面的span也有点击事件
点击了的话，会导致事件错误 11页
stopPropagation() 停止事件冒泡
preventDefault() 阻止默认行为 可以阻止表单提交,
在表单中，也可以 return false;
---------------
5 事件对象的属性
1 event.type
2 event.preventDefault()方法 阻止表单提交
3 event.stopPropagation() 阻止事件冒泡
4 event.target 获取触发事件的元素
5 event.relatedTarget
6 event.pageX 和 event.pageY获取光标相对于页面的X坐标和Y坐标
7 event.which获取鼠标的左中右键，获取键盘的按键
8 event.metaKye为键盘事件中获取<Ctrl>按键
-------------------
6 移除事件
unbind([type],[data])
one() 只执行一次，然后立即删除
**************************************
模拟操作119
tigger("")触发自定义事件还可以传递数据
triggerHander()
bind()方法 1 绑定多个事件类型
2 添加事件命名空间 便于管理
这样一删除命名空间的话，只把这个空间里面的
事件删除，不在这个命名空间里面的没事
*****************************************
jQuery中的动画
1,show() 里面数字，代表秒数 显示 hide() 隐藏
2,fadeIn()方法和fadeOut()方法 改变内容的不透明度
3，slideUp()和slideDown() 改变元素的高度，缩短隐藏
4，animate()自定义动画，125页
5 stop()停止动画
其他的交互动画方法
toggle() 切换
slide Toggle() 高度
fadeTo() 不透明度
fadeToggle() 不透明度切换
width()获取宽度
---------------------------
js的getAttribute 获取属性
jQ的attr 获取/设置普通属性 prop 获取/设置 对象属性 jq里面布尔值
disabled="disabled" js的对象.属性只能获取内置属性（不兼容）
obj.getAttribute('自定义属性');
data-abc data开头的自定义属性
.data('')
$.get(地址，数据，回调方法)
--------------------------------------
//针对当前页中的静态对象有效，页面第一次加载，有效，后来加进来的，无效
$().click();
//
$().on();
//针对当前页中的静态对象和以后动态创建的对象有效
$('#box').live();//相当于绑定在body那里 live 1.7以上被清除了
$(document).live();//相当于绑定在整个文档对象那里 live 1.7以上被清除了
$(DOM)=>JQ
JQ=>DOM
$()[0]
jq
var $a=
DOM
var a=
function js(obj)
{
obj.innerHTML--;
}
//js的默认值必须这样
function test(a)
{
a=a?a:1;
}
function test(a,b)
{
a=a?a:1;
b=b?b:1;
}
//通过js创建的就是动态的
//源代码就能看到的，html里面的
----------------------------------
高阶
function f1(){
$.ajax({
'type':'post',
'url':'09-juqery.php',
'data':'name=xiaoming&age=4',
'dataType':'json',
//请求成功处理的回调函数
'success':function(msg){alert(msg);},
//发送之前的处理函数
'beforeSend':function(){}
//发送之前的处理函数
'complete':function(){}
//发送之前的处理函数
'':function(){}
})
}
//------------------------------
$(function(){
var ids=[];
$('#del').click(function(){
//alert($('[name="id[]"]:checked')).length;
($('[name="id[]"]:checked')).each(function(index,element){
//ids[index] =element.value;
ids.push(element.value);
});
alert(ids.join(','));//split(',') explode() implode()
location='delete/ids/'+ids;
});
});
$(function(){
var ids=[];
$('#del').click(function(){
$('[name="id[]"]:checked').each(function(index,element){
ids.push(element.value);
});
if(ids.length>0 && confirm('确定要删除吗')){
var url='__CONTROLLER__/delete/ids/'+ids.join(',');
location=url;
}
});
});
------------------------------
function show()
{
$.get('{:U("content")}',{p:1,per:1},function(data){
$('#list').html($data);
})
}
$(function(){
show();
$("tbody").find("tr:odd").css("backgroundColor","$eff6fa");
});
----------------------------------
<?php
解决兼容性问题
function createXhr(){
//在W3C中.
try{return new XMLHttpRequest()} catch(e) {}
//IE
try{ return new ActiveXObject('Microsoft.XMLHTTP')} catch(e) {}
alert('你的浏览器不支持Ajex');
}
AJAX get请求5步走
1:创建ajax对象
2:设置回调函数
3:初始化ajax对象
4:发送ajax对象
5:判断与执行
window.onload=function(){
//获取事件
//(document.getElementById(xx)获取事件
$('GO').onclick=function(){
var one=$('one').value;
var two=$('two').value;
var xhr=new XMLHttpRequest();
//设置回调
xhr.onreadystatechange= function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
//设置头信息
var url ='02.php?&one=' + one + '&two=' + two + '&_=' + Math.getHouse()';
//初始化ajax
xhr.open('get',url);
//发送ajax对象
xhr.send(null);
}
}
Ajax六步走
第一步：创建Ajax对象
第二步：设置回调函数
第三步：初始化Ajax对象
第四步：设置请求头信息
第五步：发送Ajax请求
第六步：判断与执行
window.onload=function(){
$('xxx').onblur=function(){
var username = $('username').value;
//1创建ajax对象
var xhr=createXhr();
//2.设置回调函数
xhr.onreadystatechange=function(){
}
//3.初始化Ajax对象
xhr.open('post','xxx.php');
//4.设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//5.发送Ajax请求
var data='username=' + username;
xhr.send(data);
}
}
通过JQ使用AJAX
$.ajax({
url : 'xxx.php',
type: 'get',
data: {a:a,b:b},
success: function(){
//回调函数
}
})
----------------------------------
2. 完成属性可选值的禁用与否
$("input[name=attr_input_type]").click(function(event) {
var _status = $(this).val();
if(_status == 0){
// 手工
$("#content").attr('disabled',true);
}else{
// 列表
$("#content").attr('disabled', false);
}
});