day05_JQuery

gt大于        ,lt小于        even奇数        odd偶数

JS的工具类(框架),封装了JS,通过调用方法简化代码,提高开发效率

开发中通常使用JS框架.

JS中常用的框架:

​                JQuery(几十kb),Extjs,DWR...

JQ的语法:

JQ.min.js        是压缩后的文件

JQuery===$        预先定义好了一个对象

​        1.引入文件

​        2.入口函数        $(  function()  )  {};        等同于JS中的常规写法        window.onload

区别:        都是页面加载完之后执行,可以执行多次.效率比window.onload要高.

​        开发中另一种写法:        $(document).ready(function(){

​                                });

如何得到JJQ对象:        $();        JQ核心函数,        括号中可以写选择器,数组,JS对象

主要:        JS对象转JQ对象

使用JS完成定时弹出广告JQ的选择器:

选择器:        查找元素,返回JQ对象,调用JQ的方法.

基本选择器:

​        id选择器        $("#id")

​        类选择器        $(". 类名")标签名

​        元素选择器: $("元素名称")

​        通配符选择器: $(“*”)

​        并列选择器: $(“选择器,选择器,选择器”)

层级选择器:

​        后代选择器:        使用空格, 所有后代包含孙子及以下的元素.

​        子元素选择器:  使用>第一层的元素(儿子).

​        下一个元素:        使用+        下一个同辈元素

​        兄弟元素:        使用~        后面的所有的同辈元素        

内容选择器:        

属性选择器:        $("div['id']");  [attribute=value]属性=属性值

表单对象属性:checked        selected

JQ表格隔行换色案例:

改变页面元素样式的方法:        add.Class(),remove.Class()和css方法

​        2.        样式事先定义好了的(样式需求多的时候):        

​                        1.引入样式文件< style>< /style>

​                        2.$("#two tbody tr : odd").addClass("odd")

​        1.        样式需求少的情况:        $("#one  tr: gt(0): odd" ).css("background-color","red");

JQ复选框的全选和全不选:

JQ对属性操作的方法:

attr();旧版本不更新的                prop();新版本使用的

页面中添加复选框

引入JQ 的JS

编写JQ的入口函数

点击上面的复选框获得下面的多有复选框的值

JQ省市二级联动:

append();        在某个元素后添加内容

appendTo();        将某个元素添加到另一个元素后

remove();        将某个元素移除

JQ两种遍历方式:

​        1.$.each(objects(数组), function( i, n){

​        });

​        2.$("").each(function ( i , n){

​        });

下拉列表的左右选择:

JQ选择器:        表单对象属性:        enabled,        disabled        ,checked,  ,selected

JQ事件切换:

toggle();        单击事件的切换

hover();        鼠标悬停的切换,  如果只是改变样式,也可以用CSS的伪类.

JQ常用事件:                事件是函数,方法

blur                失去焦点

change        下拉列表事件

click        单击事件

dblclick        双击事件

error

focus        获得焦点,单击

focusin

focusout

keydown

keypress

keyup

mousedown

mouseenter

mouseleave

mousemove

mouseout

mouseover

mouseup

resize

scroll

select

submit

unload

HTML:代码/文本/值

$("#test1").html();        括号里什么都不写,获得test1中的所有代码.

$("#test1").html("< span>覆盖test1中的所有内容< /span>");可以识别标签

$("#text1")text();        获得text1中的文本内容.

$("#text1")text();替换text1中的文本内容,但不识别标签,只识别字符串

$("#value=name").val();        获得value的值.即获得文本的内容

$("#value=name").val("asfddgd");        设置文本内容.

案例五:下拉列表的左右选择:案例一,JQ完成表单校验:

JQ查找:                找到指定的元素

​        children()

​        find()

​        parent()

JQ事件处理:

​        trigger和triggerHandler区别:

​        trigger会触发浏览器默认的同名行为blur,光标消失

​        on, bind:        事件的绑定

​        $("#text1").on("click  dblclick" , function(){

​        多个事件同时触发同一个函数,用空格隔开,

​        var a= $(this).html();

​        alert(a);

​        });

​        delegate:事件的委派,为还没有发生的时间,子元素触发单击事件委派给父元素执行.

​        $("#eqer") . delegate(". aaa","click",function(){

​                $(this).html("< font color='red'>时间的委托< /font>")

​                this指的是发生在子元素身上的.aaa

​        })

class="required  dsad",可以写多个,写样式.为了找到这个元素,不一定定义该样式.

this事件发生在谁身上它就代表谁.

append追加,往后追加.

day05_JQuery

gt大于        ,lt小于        even奇数        odd偶数

JS的工具类(框架),封装了JS,通过调用方法简化代码,提高开发效率

开发中通常使用JS框架.

JS中常用的框架:

​                JQuery(几十kb),Extjs,DWR...

JQ的语法:

JQ.min.js        是压缩后的文件

JQuery===$        预先定义好了一个对象

​        1.引入文件

​        2.入口函数        $(  function()  )  {};        等同于JS中的常规写法        window.onload

区别:        都是页面加载完之后执行,可以执行多次.效率比window.onload要高.

​        开发中另一种写法:        $(document).ready(function(){

​                                });

如何得到JJQ对象:        $();        JQ核心函数,        括号中可以写选择器,数组,JS对象

主要:        JS对象转JQ对象

使用JS完成定时弹出广告JQ的选择器:

选择器:        查找元素,返回JQ对象,调用JQ的方法.

基本选择器:

​        id选择器        $("#id")

​        类选择器        $(". 类名")标签名

​        元素选择器: $("元素名称")

​        通配符选择器: $(“*”)

​        并列选择器: $(“选择器,选择器,选择器”)

层级选择器:

​        后代选择器:        使用空格, 所有后代包含孙子及以下的元素.

​        子元素选择器:  使用>第一层的元素(儿子).

​        下一个元素:        使用+        下一个同辈元素

​        兄弟元素:        使用~        后面的所有的同辈元素        

内容选择器:        

属性选择器:        $("div['id']");  [attribute=value]属性=属性值

表单对象属性:checked        selected

JQ表格隔行换色案例:

改变页面元素样式的方法:        add.Class(),remove.Class()和css方法

​        2.        样式事先定义好了的(样式需求多的时候):        

​                        1.引入样式文件< style>< /style>

​                        2.$("#two tbody tr : odd").addClass("odd")

​        1.        样式需求少的情况:        $("#one  tr: gt(0): odd" ).css("background-color","red");

JQ复选框的全选和全不选:

JQ对属性操作的方法:

attr();旧版本不更新的                prop();新版本使用的

页面中添加复选框

引入JQ 的JS

编写JQ的入口函数

点击上面的复选框获得下面的多有复选框的值

JQ省市二级联动:

append();        在某个元素后添加内容

appendTo();        将某个元素添加到另一个元素后

remove();        将某个元素移除

JQ两种遍历方式:

​        1.$.each(objects(数组), function( i, n){

​        });

​        2.$("").each(function ( i , n){

​        });

下拉列表的左右选择:

JQ选择器:        表单对象属性:        enabled,        disabled        ,checked,  ,selected

JQ事件切换:

toggle();        单击事件的切换

hover();        鼠标悬停的切换,  如果只是改变样式,也可以用CSS的伪类.

JQ常用事件:                事件是函数,方法

blur                失去焦点

change        下拉列表事件

click        单击事件

dblclick        双击事件

error

focus        获得焦点,单击

focusin

focusout

keydown

keypress

keyup

mousedown

mouseenter

mouseleave

mousemove

mouseout

mouseover

mouseup

resize

scroll

select

submit

unload

HTML:代码/文本/值

$("#test1").html();        括号里什么都不写,获得test1中的所有代码.

$("#test1").html("< span>覆盖test1中的所有内容< /span>");可以识别标签

$("#text1")text();        获得text1中的文本内容.

$("#text1")text();替换text1中的文本内容,但不识别标签,只识别字符串

$("#value=name").val();        获得value的值.即获得文本的内容

$("#value=name").val("asfddgd");        设置文本内容.

案例五:下拉列表的左右选择:案例一,JQ完成表单校验:

JQ查找:                找到指定的元素

​        children()

​        find()

​        parent()

JQ事件处理:

​        trigger和triggerHandler区别:

​        trigger会触发浏览器默认的同名行为blur,光标消失

​        on, bind:        事件的绑定

​        $("#text1").on("click  dblclick" , function(){

​        多个事件同时触发同一个函数,用空格隔开,

​        var a= $(this).html();

​        alert(a);

​        });

​        delegate:事件的委派,为还没有发生的时间,子元素触发单击事件委派给父元素执行.

​        $("#eqer") . delegate(". aaa","click",function(){

​                $(this).html("< font color='red'>时间的委托< /font>")

​                this指的是发生在子元素身上的.aaa

​        })

class="required  dsad",可以写多个,写样式.为了找到这个元素,不一定定义该样式.

this事件发生在谁身上它就代表谁.

append追加,往后追加.