jquery笔记和常用方法 Ajax ，json

最新推荐文章于 2024-06-07 23:26:45 发布

m0_46546178

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量596

点赞数

分类专栏：前端基础文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_46546178/article/details/122062678

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery是一个JavaScript框架，学习jQuery只需要将对应js库下载，并导入到我们项目下进行引用。

1.JQuery和js的转换

js对象转换成jQuery对象，语法：$ (js对象)

jQuery对象转换成js对象，语法：$username[index]

//js 的方式

//页面加载完毕,获取文本框的value属性值

            //JS的方式

            window.οnlοad=function(){

                var val = document.getElementById("in").value;

                alert(val+"JS");

            }

           //Jquery方式

            $(function(){

                var val = $("#in").val();

                alert(val);

            });

2.Jq的选择器

1.标签选择器

        （元素选择器）：$("html标签名")   //jQuery数组

         id选择器：$("#id的属性值")                 //jQuery对象

         类选择器：$(".class的属性值")                //jQuery数组

2.层级选择器

         1.获得A元素内部的所有的B元素：$("A  B ") $("body div").css("background-color","#FF0000"); //选择所有body的后代div标签,层级选择器

          2.获得A元素下面的所有B子元素：$("A > B") $("body>div").css("background-color","#FF0000"); //选择body的子标签div

          3.获得A元素同级下一个B元素：$("A + B") $("#one+div").css("background-color","#FF0000"); //id为one的下一个div

          4.获得A元素同级所有后面B元素：$("A ~ B"） $("#two~div").css("background-color","#FF0000"); //id为two后的所有兄弟div

3.属性选择器

  获得有属性名的元素：$("A[属性名]")

  获得属性名等于值元素：$("A[属性名=值]")

  复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值[属性名!=值]")

3.状态设置

//获得hobby的选中状态设置为不选中的状态

alert($("#hobby").prop("checked"));

$("#hobby").prop("checked",false);

4.节点的增删位置修改

           //将反恐放置到city的后面

            $("#city").append($("#fk"))

            //将反恐放置到city的最前面:prepen

            $("#city").prepend($("#fk")) //放在最前面

            //将反恐插入到天津后面:after();

            $("#tj").after($("#fk"))

            //删除

            $("#bj").remove();

            //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).

            $("#city").empty(); //innerHTML = "";

5.隔行换色

           //奇数变红 odd奇数 even偶数

            $("tr:gt(1):odd").css("background-color","red");

            //偶数变蓝

            $("tr:gt(1):even").css("background-color","blue");

6.全选全部选

$("#selectAllId").click(function(){

                        //1:获取全选框的状态

                        var $flag = $("#selectAllId").prop("checked");

                        //2:获取行选框,让所有的行选框状态和全选框保持一致

                        $(".itemSelect").prop("checked",$flag);

                   //  $(".itemSelect").prop("checked",$("#selectAllId").prop("checked"));

                  });

7. 数组的遍历

       方式一： var $optionEles=$("option");

                        $optionEles.each(function(index,element){

                              console.log(index+" "+element.value)

                              $(element).prop("value","sz2");

                              console.log(index+" "+element.value)

                        })

             方式二：var $optionEles=$("option");

                   $.each($optionEles, function(index,element) {

                              alert(index+"---------"+element.value)

});

8.事件的绑定和解绑

//事件的绑定

                        $("#inputId").bind("focus",function(){

                              $("#spanId").html("获取焦点")

                        })



                        $("#inputId").bind("blur",function(){

                              $("#spanId").html("失去焦点")

                        });

                        function clickFn(){

                              $("#inputId").unbind();

                              $("#spanId").html("")

                        }

9.二级联动

$(function(){

                        //定义区域信息

                        var bigArray =

                        [

                              ["海淀区","昌平区","朝阳区"],//北京

                              ["南开区","和平区","西青区"],//天津

                              ["浦东区","浦西区","闵行区"] //上海

                        ];

                        //1:给第一个下拉框绑定change事件

                        $("#cityId").bind("change",function(){



                              //清空元素

                              $("#areaId").html("<option>--请选择区域--</option>");



                              //2:获取被选中直辖市的value值

                               var $index = $(this).val();

                              //3:通过这个索引去二维中选择对应的一维

                                var array = bigArray[$index];

                              //4:遍历一维

                              for (var i = 0; i < array.length; i++) {

                                    //5:创建option元素,请数组中的字符串作为文本值:<option>海淀区</option>

                                    var $optionEle =   $("<option>"+array[i]+"</option>");

                                    //6:将创建好的元素添加到第二个下拉框

                                    $("#areaId").append($optionEle);

                              }

                        })；

                  });

10.ajax

   var param=“username=xiaoming & password=123”；

1.$.get(url,param,function(){},type);



2.$.post(url,param,function(){},type);

3.$.ajax({});

$.ajax({

url:

beforeSend:function 发送之前做的一些事情

data：发送的参数

dataType：服务器返回的数据类型

error：function（）{} 错误时执行的函数

//data返回的数据，status状态码说明，自定义的，xmlhttp 底层核心引擎对象

success：function（data，status，xmlhttp）{}

type："get"



});

url:请求地址

params：参数

function：回调函数

type：数据类型