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

原文地址:https://www.cnblogs.com/unrulywind/p/9146661.html

时间: 2024-10-08 23:58:51

java复习前端篇——Jquery的相关文章

java复习前端篇——JavaScript

1.JS的概述:     什么是JS:运行在浏览器端脚本语言,基于对象和事件驱动的语言,应用于客户端,浏览器会在读取代码时,逐行地执行脚本代码.而对于传统编程来说,会在执行前对所有代码进行编译.   JS的用途:使用JS提升用户的体验.使HTML动起来. 2.JS的引入方式: (1):页面内直接编写JS代码,JS代码需要使用<script></script>. (2):将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.    <script  type=&

java复习前端篇——HTML

HTML:超文本标记语言(页面中可以包含图片.音乐.链接.程序等非文字元素,通过一组标签的形式描述事物的一门语言) HTML的结构标签:根标签:<html>.头标签:<head>.体标签:<body> HTML的字体标签:<font> 属性:color {字体颜色分为两种(1)英文单词设置:black,red,green,blue...(2)使用16进制数设置:#FFFFFF , #FFF} size{字体的大小} face{字体的样式} HTML的排版标签

java复习web篇——servlet

1.Servlet Servlet的概述: 就是一个运行在WEB服务器上的小的Java程序,用来接收和响应从客户端发送过来的请求,通常使用HTTP协议.Servlet就是SUN公司提供的一个动态网页开发技术.2.5版本:基于配置式开发(web.xml)3.0版本:基于注解式开发Servlet的作用:    它会基于HTTP协议, 在服务器端接收客户端发出的请求, 然后进行相应的业务逻辑处理, 处理完了以后, 会向客户端返回一个响应 2.使用Servlet:    (1). 编写一个类      

java复习基础篇——代码执行顺序

代码块:在Java中,使用{}括起来的代码成为代码块 根据其位置和声明的不同,可以分为局部代码块:局部位置,用于限定变量的生命周期 构造代码块:在类中的成员位置,用{}括起来的代码.每次调用构造方法执行前,都会先执行构造代码块. 作用:可以把多个构造方法的共同代码放在一起. 静态代码块:在类中的成员位置,用{}括起来的代码,只不过它用static修饰 作用:一般是对类进行初始化 public class BlockTest { { System.out.println("444 BlockTes

java复习基础篇—-JVM内存结构(转)

主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: <深入理解Java虚拟机(第二版)>中的描述是下面这个样子的: Java中的内存分配: Java程序在运行时,需要在内存中的分配空间.为了提高运算效率,就对数据进行了不同空间的划分,因为每一片区域都有特定的处理数据方式和内存管理方式. 具体划分为如下5个内存空间:(非常重要) 栈:存放局部变量

java复习基础篇——Mysql数据库

数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作. mysql的dos窗口启动关闭命令:net start mysql和net stop mysql 登录命令:(1)mysql -u用户名 -p密码      (2)mysql --host=ip地址 --user=用户名 --password=密码 DOS操作数据乱码解决: 我们在dos命令行操作中文时,会报错ERROR 1366 (HY000): Inco

java复习汇总之面试篇

这些个人感觉都是基础,希望看的园友不要喷. 1.什么是servlet线程安全,如何解决? 2.spring事物管理,在项目中你是怎么管理事物的? 3.java中的有几种线程? 4.java有几种锁? 5.怎么理解java中的多态,项目中何时用到抽象类? 6.如何处理js,sql注入? 7.struts2拦截器的原理? 8.如何理解spring AOP? 11.java中常用的集合,在项目中用到时,有什么需要注意的? 12.如果优化项目中sql,为什么要那样优化? 13.java性能优化? 14.

jquery前端篇

QQ:1187362408 欢迎技术交流和学习 jquery前端篇(jquery): TODO: 1,jquery:精确控制页面对象,体现了OOP思想(面向对象) 2,jquery:选择器的调用 3,jquery:扩展validate插件,实现自定义验证控件,统一调用 4,jquery:前端获取后台数据,属性调用 5,jquery:each循环遍历json数据 6,字符串转换为json的两种方式:eval('('+string+')'),$.parseJSON(string)[需要引用jquer

[转]解读2014之前端篇:任性的颠覆式改变

http://www.infoq.com/cn/articles/2014-review-front-end-part 2014年,整个IT领域发生了许多深刻而又复杂的变化,InfoQ策划了“解读2014”年终技术盘点系列文章,希望能够给读者清晰地梳理出技术领域在这一年的发展变化,回顾过去,继续前行. 本篇是解读系列的前端篇,小编邀请到天猫前端团队的三七.铁军.不四.鬼道这四位专家来解读2014年前端领域最引人注目的几大热点. HTML5正式定稿,ECMAScript 6 规范从纸上走到现实 2