jquer总结

前端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);

        }

    });