JQuery基础

 

一、语法的基本结构:


第一步:导入JQuery脚本包。
第二步:写JQuery的ready事件
$(document).ready(function(){
    //在这里面写代码。
});

或者$();

注意:
1.JQuery的触发时机。。。。。。。。。
2.非侵入性的编码方式。
3.链式结构的编码方式。
4.集合式操作。操作选择器选择出来的一组对象。

 

特点(或者说优势):

1.写的少,做得多

2.体积小

3.链式编程

4.隐式迭代、插件丰富(bootstarp)、开源、免费等、、、、迭代=循环

二、具体语法

 

(一)找到元素


选择器的种类:同样式表(CSS3.0)
第一类:基本选择器
1.最最基本的:标签,ID选择器,class选择器
2.组合选择器:空格(后代),逗号,标签名.class,> (子级选择器)
第二类: 过虑选择器
1.基本过滤(按照HTML标记的书写顺序来过滤)
:first - 第一个
:last - 最后一个
:eq(索引号) - 任意一个
:lt(索引号) - 大于某个索引号
:gt(索引号) - 小于某个索引号
:odd - 奇数个
:even - 偶数个
:not(选择器) - 排除

2.属性过滤
[属性名] - 选择拥有这个属性的元素
[属性名=值] - 找属性名是某个值的
[属性名!=值]
[属性名*=值] - 属性值中包含某个值
[属性名^=值]  属性值是以..开头
[属性名$=值]  属性值是...结尾

3.内容过滤
:has(选择器) - 开始与结束标记之间是否包含某类子元素,如果包含,就选择出来。
:contains(字符串) - 开始与结束标记之间是否包含某段文字,如何包含就选择出来。

(二)DOM操作


1.操作元素本身
    操作属性,操作样式,操作内容
    (1)操作属性:
    a.获取属性值:var s = xxx.attr("属性名");
    b.添加属性:attr("属性名","属性值")
    c.移除属性:removeAttr("属性名")

    (2)操作样式:
    1).操作样式的class选择器
    addClass("class选择器的名")
    removeClass("class选择器的名")
    toggleClass("class选择器的名") 切换样式
    2).操作内联样式
    css("样式名")   获得样式值
    css("样式名","样式值") 设置和替换样式

    (3)操作内容
    1)表单元素:
    取值:var s = xxxx.val()
    赋值:xxx.val("")
    2)非表单元素:
    取值:var s = xxx.html(); var s = xxx.text();
    赋值:xxx.html("");xxx.text("")

    <textarea>dsfasdfasdf</textarea>

2.操作相关元素
    找相关元素:父、子、兄弟、前、后
    操作相关元素:添加、复制、删除、替换

(三)事件与动画

 一、事件
1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件。
onclick - click
ondblclick - dblclick

onmouseover - mouseover
onmouseout - mouseout

onfocus - focus
onblur - blur

onchange - change

onkeydown - keydown
onkeyup - keyup
onkeypress - keypress

2.特有事件:
hover(function(){},function(){}):相当于把mouseover和mouseout结合起来了
toggle(function(){},function(){},...function(){}):每点击一下执行下一个function,如执行到末尾,会再返回第一个执行


3.JQuery中的事件,需要事件的小括号中写function(){}
$("#Button1").click(function(){
    //事件处理代码
});

案例:
1.光棒效果:mouseover,mouseout
2.展开面板:click

二、动画
hide(),show()
fadeIn(),fadeOut()
slideUp(),slideDown()

slideUp([毫秒数],[回调函数])
slideUp(3000,function(){xxx();})

 

 

 

 

posted @ 2015-10-28 21:36  Franky2015  阅读(113)  评论(0编辑  收藏  举报