zoukankan      html  css  js  c++  java
  • java复习前端篇——Jquery

      1.Jquery概述

    轻量级的JS的类库.对JS进行封装。JQuery的作用:做页面的特效,页面异步操作。(使用时首先引入Jquery文件{注意版本})

      2.jq的入口函数

      jq是等页面的DOM树绘制完成后进行执行.可以编写多个入口函数。
    而js的匿名函数,只能编写一个。

    传统的JS的方式:页面加载的事件只能执行一次.
        window.onload = function(){}


    Jquery原始写法
        $(document).ready(function(){
      // 在这里写你的代码...
    });
    Jquery简化写法
        $(function(){
        // 在这里写你的代码...
    });

    {$(function(){}):等页面的DOM树绘制完成后进行执行.
    相当于页面加载的事件,可以执行多次.效率比window.onload要高.
    $相当于JQuery}

      3.JQ对象与JS对象相互转换

    (1)JS对象转为JQ对象:var jqObj = $(jsObj);
    (2)JQ对象转为JS对象:
        var jsObj = jqObj[0];
        或者 var jsObj = jqObj.get(0);

      4.Jquery选择器

    描述:$("选择器")获得的都是数组对象


    (1)基本选择器
        1.元素选择器
            $("标签名")
        2.id选择器
            $("#id属性值")匹配标签的id的属性值
        3.类选择器
            $(".class属性值")匹配标签class的属性值
        4.通配符选择器
            $("*")匹配所有的标签
        5.并列选择器
            $("选择器1,选择器2,选择器3")


    (2)层级选择器
        空格:元素的后代元素(包含所有后代)
            $("div span")匹配div下面所有的span标签
        > :子元素选择器(只包含儿子)
            $("div > span")匹配div下面第一层span标签
        +:下一个兄弟元素
        ~:后面的所有的兄弟元素


    (3)基本过滤选择器
        :odd  奇数
            $("#table tr:odd")  匹配id="table"的奇数行
        :even  偶数
            $("#table tr:even")  匹配id="table"的偶数行
        :first  第一个
            $("#table tr:first")  匹配id="table"的第一行
        :last  最后一个
            $("#table tr:last")  匹配id="table"的最后一行
        :eq(数字)  第几个(从下标0开始)
            $("#table tr:eq(3)")  匹配id="table"的第四行


    (4)属性选择器
        选择器[属性]
            描述:匹配选择器中有属性的标签
            input[type]:匹配input标签中有type属性的标签
        选择器[属性=属性值]
            描述:匹配选择器中存在属性=属性值的标签
            input[type='checkbox']:匹配所有的复选框


    (5)表单选择器
        1.表单对象选择器:
    :input  匹配所有 input, textarea, select 和 button 元素
    :text  匹配所有的单行文本框
    :password   匹配所有密码框
    :radio  匹配所有单选按钮
    :checkbox   匹配所有复选框
    :submit  匹配所有提交按钮
    :image  匹配所有图像域
    :reset  匹配所有重置按钮
    :button  匹配所有按钮
    :file   匹配所有文件域
    :hidden  匹配所有不可见元素,或者type为hidden的元素
       

    2.表单对象属性选择器:

    :enabled 匹配所有可用元素
    :disabled 匹配所有不可用元素
    :checked 匹配选中的radio/checkbox
    :selected 匹配选中的下拉框

      5.Jquery的属性操作

    attr  操作非boolean属性的属性----------$("选择器").attr("src","1.png")
    prop  主要用于操作boolean属性(checked和selected)---------- $("选择器").prop("checked",true);
    removeAttr():从每一个匹配的元素中删除一个属性
    removeProp():用来删除由.prop()方法设置的属性集

      6.Jquery的内容操作

    html()
        1.获取标签内容体(包含html标签)  var str =  $("idDiv").html(); 获取id=idDiv的内容体
        2.设置标签内容体  $("idDiv").html("<span>覆盖内容</span>") 设置id=idDiv的内容体,会覆盖它原本的内容
    val()
        1.获取表单元素的value属性(包含选中的checkbox/radio/select)  var v = $("#select").val();获取id=select选中的下拉框的值
        2.设置表单元素的value属性(可以用来选中checkbox/radio/select) $("#select").val("北京");选中id=select下面选项value="北京"的<option>标签
    text()
        1.获取标签的纯文本内容(不包含html标签)  var text = $("idDiv").text();获取id=idDiv的纯文本内容
        2.设置标签的纯文本内容 $("#idDiv").text("纯文本内容");设置id=idDiv的纯文本内容

      7.Jquery文档处理

    append()--------描述:$("#idDiv").append("<span>追加到id=idDiv的后面</span>")
    appendTo()-----描述:$("#idSpan").appendTo("#idDiv");将id=idSpan的标签移动到id=idDiv的后面
    remove()--------描述:$(".classDiv").remove();删除所有class=classDiv的所有标签
    insertBefore() ------把所有匹配的元素插入到另一个、指定的元素元素集合的前面
    insertAfter() --------把所有匹配的元素插入到另一个、指定的元素元素集合的后面

      8.Jquery操作CSS样式

    css()----------------描述:$("#idDiv").css("background","red");给id=idDiv的标签的style属性设置background:red的css样式
    addClass()---------描述:$("idDiv").addClass("newClass");给id=idDiv的标签class属性添加newClass样式
    removeClass()------描述:$("#idDiv").removeClass("newClass");删除id=idDiv标签中class中的newClass

      9.Jquery常用事件

    click点击事件:
        $("选择器").click=function(){      }
    change下拉列表改变事件:
        $("选择器").change=function(){      }
    focus获得焦点事件:
        $("选择器").focus=function(){      }
    blur失去焦点事件:
        $("选择器").blur=function(){      }
    submit提交表单事件:
        $("选择器").submit=function(){      }注意必须返回false才能阻止提交表单

      10.Jquery 触发事件

    trigger():
        描述:使用Jquery触发指定事件 $("#input").trigger("focus");触发id=input输入项的获得焦点事件,该方法会执行浏览器默认行为
    triggerHandler():
        描述:使用Jquery触发指定事件 $("#input").triggerHandler("focus");触发id=input输入项的获得焦点事件,该方法会阻止浏览器默认行为

      11.Jquery的事件切换

    toggle([speed],[easing],[fn]);--单击事件的切换
        用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
     
    hover([over,]out)
        一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
            over:鼠标移到元素上要触发的函数
            out:鼠标移出元素要触发的函数

      12.Jquery each循环

    1.$.each();
        描述:一般用于循环遍历数组对象
        格式:$.each(数组对象,function(i,n){         });----------这里function代表回调函数
    2.$("选择器").each()
        描述:一般用于循环遍历选择器所选择的JQ数组对象
        格式:$("选择器").each(function(i,n){          });
    3.注意:在each里面使用this时代表循环的当前值,也就是上面的当前循环的n的值。   

  • 相关阅读:
    从零实现一个http服务器
    服务器端编程心得(七)——开源一款即时通讯软件的源码
    服务器端编程心得(六)—— 关于网络编程的一些实用技巧和细节
    服务器编程心得(五)—— 如何编写高性能日志
    以芯片直读方式得到的Android全盘镜像解析——DOS分区
    一款开源数据恢复工具——scalpel
    以芯片直读方式得到的全盘镜像解析及ext4日志区域解析——GPT分区
    Linux程序设计之shell程序设计
    算法——蛮力法之最近对问题和凸包问题
    算法——蛮力法之顺序查找和蛮力字符串匹配
  • 原文地址:https://www.cnblogs.com/unrulywind/p/9146661.html
Copyright © 2011-2022 走看看