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

 

posted @ 2017-02-10 22:49  beppezhang  阅读(260)  评论(0编辑  收藏  举报