前端学习---jquery

本部分主要记录jquery的  ‘选择器’  ‘dom操作’  ‘ajax’:

1:‘语法‘:

jquery的基本语法:$(selector).action()

$符号:定义jquery    selector:选择器,用于查找html元素   action() 方法:对元素的操作

如:$(‘p‘).hide():隐藏所有<p>标签

说明:文档加载就绪的函数

实际的项目中所有的jquery函数都位于 document ready 函数中:这是一个文档加载就绪的函数,为了防止文档在加载就绪

之前运行jquery函数,导致失败;

如: $(document).ready(function(){

             $(‘p‘).hide();

});

一个正确的加载jquery的函数应当如上所示;

2:选择器:

按照jquery的官方文档来划分:jquery可分为九大选择器:

1):  *   $("*")    所有元素

      #id    $("#name")   id="name"的元素

      .class   $(".info")     class="info" 的元素

       element   $("p")     <p>标签的元素

       .class.class   $(".info.demo")    所有 class="intro" 且 class="demo" 的元素

具体的 jquery选择器的种类以及使用方法可点击查看一下链接:

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

3:‘dom操作‘:DOM = Document Object Model(文档对象模型)

获得内容  --- text(),html()和val();

text() - 设置或返回所选元素的文本内容;

如:<b>this is the b element</b>    只是获取其中的文本内容,文本不加黑体

html() - 设置或返回所选元素的内容(包括 HTML 标记)

如:<b>this is the b element</b>     获取其中的黑体文本内容

val() - 设置或返回表单字段的值    获取表单元素提交的值

获取属性---attr();

如:操作<a href="a11" target="_blank">点击进入超链接</a>

$("href").attr();返回的值为:all

设置内容--  text("xxx")、html("xxx") 以及 val("xxx")

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

设置属性---attr();

添加新的 HTML 内容---

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

删除元素/内容---

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

4:jquery ajax操作:

AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新

这里主要关注的是使用ajax技术实现前后台的数据交互:

get方式:一般用于向后台请求数据的场景    Post方式:用于前端向后台提交数据

1):使用get请求获取后台服务返回的数据

$("#button").click(function(){
          $.ajax({
                type:"get",    请求的方法
                url:"/user/getUser.do",   请求的服务地址
                contentType:"application/json",    返回数据的格式,这里是json
                data:JSON.stringify(data),   向后台提交数据时,需要将json格式的数据转化为json字符串,这里就是起这个作用的
                dataType:"json",    需要提交的数据格式
                success:function(result){   回调函数:通过回调函数可以获取到后台返回的数据
                    alert(result.name);
                   
                }
            });
        });

2)post方式:

$("#button").click(function(){
           var data={"id":"1111","name":"张上亮","code":"beppe"};   需要提交到后台服务的数据,一般是通过dom操作获取元素中的数据;
            $.ajax({    ajax模板,post请求和get请求基本一致
                type:"post",   
                url:"/user/saveUser.do",
                contentType:"application/json",
                data:JSON.stringify(data),
                dataType:"json",
                success:function(result){
                    
                    alert(result.shanghai);
                  
                }
            });
        });

基于ajax的个get请求和post请求都基本一致,而且各个方法中应用ajax的模板都是基本一致的,可以将这个方法进行封装一层,这里就不做这个操作了;

时间: 2024-10-13 02:30:31

前端学习---jquery的相关文章

前端学习——JQuery Ajax使用经验

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

前端学习-jQuery源码学习

jQuery 2 的版本与jQuery 1的版本相比,没有再考虑IE6,7,8的兼容问题,因此使用时如果不用考虑IE6,7,8就用jQuery 2的版本,如果需要考虑IE6,7,8就使用jQuery 1的版本. jQuery对象是一个以DOM为对象的特殊数组,并包含大量方法,简单可以理解为: function jQuery(){     var jquery = [dom1, dom2, dom3];     jquery.fn1 = function(){-};     jquery.fn2

前端学习JQuery篇05——基本操作(CSS)

CSS css(name|pro|[,val|fn])1.9*访问或设置匹配元素的样式属性. 一个参数为访问 两个参数为设置 jQuery.cssHooks直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性. 它的目的是为了标准化 CSS 属性名或创建自定义属性. 例如,某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius, 而早期的Firefox版本

前端学习——jquery操作例子

一.jquery和DOM函数的转换 1.1 jquery转换成dom $('#i1') --------------> $('#i1')[0] 2.1 dom转换成jquery var i1=documen.getElementById('#i1')---------> $(i1) 二.写左侧菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

前端学习——使用Ajax方式POST JSON数据包

0.前言 本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰. 为了说明问题,前端和后端较为简单,重点突出AJAX的应用. [前端]--add-post-json.html 图1 add页面 [后端]--add-post-json.php <?php // 返回JSON格式 header('Content-Type:application/jso

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言 在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常"犯迷糊",需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到.为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高. [相关博文] [前端学习--如何修改<a href="#">url name</a> 使用javascript和JQuery] [示例页面]--test-ul.html <!DOCTY

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分