黑马程序员技术交流社区

标题: 【石家庄校区】day05_JQuery [打印本页]
作者: 奔跑的蜗牛006    时间: 2018-5-3 16:08
标题: 【石家庄校区】day05_JQuery
本帖最后由 小石姐姐 于 2018-5-4 09:52 编辑

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追加,往后追加.







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2