前端学习---jquery

Posted 2020-08-30 beppezhang

本部分主要记录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的模板都是基本一致的，可以将这个方法进行封装一层，这里就不做这个操作了；