Jquery

简介: 介绍Jquery

Jquery核心函数与jquery对象与dom对象转换:

1.jQuery(html,[ownerDocument])

      1.jQuery(html代码)它的作用是将一个dom对象包装成jQuery对象

      2.什么是jQuery对象:我们jQuery定义的方法与属性,只有jQuery对象可以调用

2.jQuery([selector,[context]])

      1.这个函数我们使用它的主要作用是用于在页面上查找,根据css选择器

      2.参数1jQuery提供了9中选择器,参数2context指定要查找的dom

3.dom对象转为jQuery对象----$(dom)jQuery对象转为dom对象---jQuery.get(0)

 

4.jQuery选择器:

      1.基本选择器:#id.class*匹配所有元素、selectorselector---可将每个选择器匹配到元素合并一起返回

             1:html( )方法,无参数代表获取元素中的html代码,如果有参数代表设置元素的html信息

             2:text( )方法,无参数获取元素中的文本信息,如果有参数设置文本的信息

             3:each( )方法,它的作用可以帮我们遍历我们的元素,可以传递一个函数each(function(n)),n代表的是每一元素的序号,

             在其函数中可以通过this来获取dom对象。

             4:index( )方法,它可以判断元素的序号

      2.层级选择器:层级选择器是根据元素的关系来获取,关系是指父子关系、兄弟关系

             1:空格--得到元素的下的所有子元素(包括直接子元素和间接子元素)

             2:大于号>--只获取直接的子元素

             3:加号+ ---只获取直接的一个兄弟元素

             4:波浪线---所有的后边的兄弟元素

             5:css( )方法,它可以设置元素的样式

      3.过滤选择器:过滤选择器它是基本选择器和层级选择器获取一批元素后,再进行过滤操作,基本都是以:开头的,除了属性过滤选择器

             1.基本过滤选择器::first:not():gt():odd:even:header--控制所有标题

             2.内容过滤选择器::contains():empty:has()

             3.可见过滤选择器::hidden:visible:val()--获取元素当前的值、show--让元素显示出来、hide()--让元素隐藏

             4.属性过滤选择器:attr()

             5.子元素过滤选择器::nth-child--1开始、

             4.表单过滤选择器:blur()--失去焦点事件、trim()--它是去掉字符串左右空格、click()--点击事件、submit()--表单提交

             4.表单对象过滤选择器::checked:selected

 

文档操作:

1.内插入:prepend()--前插入、append()--后插入

2.外插入:before()--前插入、last()--后插入

3.删除:empty--将元素下所有子元素删除、remove()--删除某个子元素、

4.克隆:clone()--克隆方法

5.替换:replaceWith()--替换方法

 

筛选操作:

1.eq可以根据序号来获取元素firstlast来获取。

 

事件介绍:

1.Jquery中的事件与传统的javascript事件有啥区别:Jquery中事件允许绑定多个函数,而javascript只能绑定一个

2.bind()--可以绑定事件、unbind()--可以解除事件、live()--可以绑定事件--更厉害、die()--可以解除事件

3.鼠标悬停就会触发:mouseover()

4.事件切换:hover()---这个操作可以绑定两个函数,当mouseover时第一个函数执行,当mouseout第二个函数执行。

5.事件切换:toggle()---可以乱流切换

 

ajax

1.如何发送一个ajax请求

      1.获取一个XMLHttpRequest对象

      2.设置一个回调函数---它的作用就是处理服务器响应的数据,通过XMLHttpRequest对象的onreadystatechange设置回调函数

      3.设置我们的请求方式及请求地址---通过XMLHttpRequest对象的open()方法

      4.真正向服务器发送请求---

      5.获取XMLHttpRequest对象--直接new

             1.XMLHttpRequest常用属性:1.onreadystatechange--用于绑定回调函数、

                    2.readyState--描述的是http请求的状态

                    3.status--描述的是http状态码(200表成功)

                    4.responseText--获取服务器响应数据

             2.XMLHttpRequest常用方法:1.open()--用于设置请求方式(请求方式,urltrue/false)

                    2.send()--真正向服务器发送请求,如果请求方式是get,用send(null)

 

Ajax开发介绍:

1.loadgetpost他们简化了$.ajax操作,开发时用的比较多

2.getScriptgetJSON他们是用于解决ajax跨域问题的

 

JSON

1.Fastjson:将java的对象转换成json数组

 

XStream

1.常用方法:

      1.alias()----设置类别名

      2.aliasField()---设置属性别名

 

Ajax跨域问题:

1.什么是跨域:跨域他是不同的域名(服务器)之前的相互资源的访问

2.跨域解决方案:

      1.什么时候会用到跨域:一般是在自己的内部工程中会出现跨域情况。

      2.有三种解决方案:

             1.代理方案:

             2.jsonp方案:

 

Jquery分页操作:

1.前端使用bootstrap的分页组件来完成数据分页显示

2.服务器端使用javaee经典三层架构

      1.web层:mvc=jsp+servlet+javabean。例如requestresposesession对象操作,它调用业务层来实现具体的功能

      2.业务层:主要完成业务逻辑,会调用dao层的多个操作来组装我们的业务。不包含web常用对象,他只是java代码

      3.dao层(数据访问层):主要是与数据库进行交互,完成crud操作

      4.优点:利于开发与复用,结构清晰,利用标准化

      5.缺点:开发难度加大,性能得到一定的消耗

3.使用c3p0连接池,dbutils来完成数据库操作

4.分页介绍:

      1.为什么要分页:因为数据量比较大,数据在展示时都会分页

5.分页有两种:

      1.物理分页:使用数据库本身提供的分页操作来完成数据查询,查询到的就是当前页的信息。例如mysql可以使用limit

      2.逻辑分页:它是利用数据库的游标来操作(将数据库所有数据都查出来,存储在内存中)

6.完成分页必备条件:

      1.页码pageNo  默认是1会根据上一页,下一页,首页尾页选择变化,我们通过js来控制。

      2.每页显示条数pageSize认为设置

      3.总条数

      4.总页数=总条数/每页显示条数(要取整)

      5.封装到当前页的数据

 

Jquery插件机制:

1.Jquery.extend()---扩展Jquery对象本身,$.post   $.ajax $.get

2.Jquery.fn.extend()---扩展Jquery对象,$("#f").find()   $("abc").val()

相关文章
|
6月前
|
Web App开发 设计模式 JavaScript
jquery详解
jquery详解
29 0
|
1月前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
32 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是Jquery?
什么是Jquery?
|
6月前
|
JavaScript 前端开发
什么是jQuery?
什么是jQuery?
|
Web App开发 设计模式 JavaScript
jquery
jquery
58 0
|
前端开发 JavaScript
Html+Css+jquery 2021/11/1
Html+Css+jquery 2021/11/1
82 0
Html+Css+jquery 2021/11/1
|
XML 缓存 JavaScript
jQuery(下)
jQuery(下)
|
存储 JavaScript 前端开发
三天轻松搞定JQuery
三天轻松搞定JQuery
117 0
三天轻松搞定JQuery
|
JavaScript 前端开发 API
JQuery
本章讲述关于 JQuery的介绍、使用方法和选择器
JQuery
|
XML Web App开发 JSON