java复习前端篇——Jquery

Posted 2020-11-11 。忽而今夏℡

　　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的值。