zoukankan      html  css  js  c++  java
  • 前端学习---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的模板都是基本一致的,可以将这个方法进行封装一层,这里就不做这个操作了;

  • 相关阅读:
    在一台服务器上搭建相对高可用HiveServer实践
    HDU 4462 Scaring the Birds (暴力求解,二进制法)
    HDU 4461 The Power of Xiangqi (水题)
    HDU 4460 Friend Chains (BFS,最长路径)
    UVaLive 7270 Osu! Master (统计)
    CodeForces 705C Thor (模拟+STL)
    CodeForces 705B Spider Man (水题)
    CodeForces 705A Hulk (水题)
    UVa 11971 Polygon (数学,转化)
    UVa 10900 So you want to be a 2n-aire? (概率DP,数学)
  • 原文地址:https://www.cnblogs.com/beppezhang/p/6388332.html
Copyright © 2011-2022 走看看