jQuery初步实战不得不了解的知识点-CSDN博客

本文链接：https://blog.csdn.net/qq_43592396/article/details/112566245

对于前端的学习，目前肯定是像vue，react等流行框架比较火热，好的框架让开发事半功倍，了解好框架背后的基础部分，由浅入深才能更好的进入实战开发，让我们一起来走走前端不得不了解的一些知识点吧

1.jQuery入门：

jQuery:一个快速、简洁的JavaScript框架,学习过js的同学一定都有过被js复杂冗长的dom语法所烦恼，现在，让所有的脏活累活交给jQuery去做，使用jQuery可以大大降低了函数的编写，更简洁明了的js语法请问谁不爱。

1.了解什么是jQuery，怎么引入

* `方法一：使用本地jQuery,在<head>标签内插入<script type="text/javascript" src="本地jquery地址/jquery文件名.js"></script>代码，即可完成相应jquery代码的引用。`

* 方法二：使用在线jQuery,在<head>标签内插入<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>代码，即可完成相应jquery代码的引用。

2.了解jQuery语法

3.了解jQuery选择器

4.了解jQuery事件

5.了解jQuery获取内容和属性

6.了解jQuery设置内容和属性

7.熟悉jQuery-AJAX的get，post，ajax请求。

function test(){
   $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            url:"testLogin.aspx",
            //提交的数据   该参数为属性值类型的参数         //（和url?Name="sanmao"&Password="sanmapword"一样）后台若为SpringMVC接受，注明@RequestParam
            data:{Name:"sanmao",Password:"sanmaoword"},
            //返回数据的格式
            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
            //在请求之前调用的函数
            beforeSend:function(){$("#msg").html("logining");},
            //成功返回之后调用的函数             
            success:function(data){
              // 执行成功
            }   ,
            //调用执行后调用的函数
            complete: function(XMLHttpRequest, textStatus){
             // 调用成功
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }         
         });

  }

1.1 一些小样例

jquery改变css:
例：$(“p”).css(“background-color”);
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jquery操作表格：
//点击#table3 的单元格返回单元格索引

$("#table3 td").click(function () {
    var tdSeq = $(this).parent().find("td").index($(this));
    var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
    alert("第" + (trSeq) + "行，第" + (tdSeq+1) + "列");
})

jquery动态改变元素内容
● text() - 设置或返回所选元素的文本内容
● html() - 设置或返回所选元素的内容（包括 HTML 标记）
● val() - 设置或返回表单字段的值（只针对表单或者输入框）

单击隐藏显示样式：

if($(this).hasClass("yang-speedresults-refush-css")){
        $(this).removeClass("yang-speedresults-refush-css");
    }else {
        $(this).addClass("yang-speedresults-refush-css");
    }