JQuery

最新推荐文章于 2024-07-21 10:17:51 发布

lzsan_

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量122

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/lzsan_/article/details/125106741

版权

一、引入jquery文件以后，会有 Jquery 和$的全局变量，代表jquery方法

1. $() 可以传入css的选择器，返回的是一个jquery封装后的dom对象。

二、元素的显示隐藏操作

hide([speed 毫秒],[callback]);隐藏元素,show()同hide参数一样。元素的显示隐藏。
toggle([speed 毫秒],[callback]),自动切换hide 和 show的状态
fadeIn([speed 毫秒],[callback])淡入，fadeOut淡出，fadeToggle()切换两种状态
slideDown([speed 毫秒],[callback]) 高度过渡效果的显示元素,slideUp隐藏，slideToggle()自动切换两种状态

三、事件 $(css选择器).事件名称()。需要给事件传递一个函数作为事件执行的函数。

// js原生事件去掉on
var show = true;
$("#btn1").click(function(){ 
  show = !show;
  if(show){
    $(".div1").slideDown(500);
  } else {
    $(".div1").slideUp(500,function(){
      console.log("hide is ok");
    });
  }
})

//jQuery实现
$("#btn2").click(function(){
  $(".div1").slideToggle(500);
});

四、 jquery 传入函数，可以等dom树构建完成后再执行该函数。

一般在body结束标签引入js文件，就不需要使用该方法。

$(function(){

  console.log($(".div1").show());

})

五、动画$(selector).animate({css style},speed,[callback]);

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

  $(".div1").animate({left:"200px",height:"200px"},500,function(){

    $(".div1").hide(500);

  });

})

六、 css控制 $(selector).css({});

$(".div2").css({width:"100px",height:"100px",background:"blue"});

七、链式操作每一个jquery对象的方法都会返回该对象，所以可以用链式操作。

$(".div1").animate({left:"200px"},500).animate({top:"200px"},500).animate({left:0},1000).animate({top: 0},500).slideUp(500);

八、获取元素内容和属性

1. html() 获取元素内容，传了参数就是赋值.

 let html = $(".div1").html("<span>div1-span</span>");

2. text() 获取文本内容(会去掉html标签，只返回标签文本),传了参数就是赋值文本内容.

$(".div1").text("hello");

3. val() 获取input框的value值，传参就是赋值操作

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

  console.log($("input[name='uid']").val("change value"))

})

4. attr() 获取元素的属性，attr({}),修改属性值

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

  $("#btn3").attr({title:"hello btn3"});

})

5. width(),height()获取元素的内容尺寸,如果传递参数就是修改尺寸，不包含padding，border。

innerWidth(),innerHeight() 获取包含padding的尺寸
outerWidth(),outerHeight() 获取包含padding,border的尺寸。outerWidth(true)传递一个true的参数，可以获取包含margin外边距的尺寸。

$(".div2").width(400);

九、添加元素的操作

1. append() 在被选元素的内容结尾插入内容

$(".div2").append("<h3>h3</h3>")

2. prepend() 被选元素内容的前面插入内容

$(".div2").prepend("<h3>h3</h3>")

3. after() 被选元素后面插入一个兄弟节点

$(".div2").after("<h3>h3</h3>")

4. before() 被选元素前面插入一个兄弟节点

$(".div2").before("<h3>h3</h3>")

5. remove() 删除被选元素.

$(".div2").remove();

6. empty() 删除被选元素的所有子元素

 $(".div2").empty();

十、 class操作

1、addClass() 被选元素添加一个或者多个类

$("#ul").addClass("ul1 ul2")

2、 removeClass() 移除1个或者多个类

$("#ul").removeClass("ul1 ul2")

3、toggleCalss() 被选元素的类进行添加/删除切换

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

  $("#ul").toggleClass("ul1 ul2")

})

十一、元素选择扩展

1. eq(index) 返回指定索引的元素

console.log($("#ul>li").eq(2).text());

2. parent() 返回指定元素的父元素

console.log($(".div2").parent())

3. children() 返回指定元素的直接子元素，可以传参数选择指定的子元素。

console.log($("#ul").children());

4. find(selector) 返回指定元素的所有后代元素，参数选择指定的后代元素。

console.log($("#ul").find("span"));

十二、遍历，$(selector).each(function(index,element){}); index是索引，element是遍历的当前元素

$("#ul>li").text("new 1"); // 可以选择批量元素进行同一个方法操作。
$("#ul>li").each(function(index,element){

  // $(element).text(`new ${index}`);

  $(this).text(`new ${index}`);  // this 或者element是js原生对象，需求传递到$()返回包装后的jquery dom对象。

})

十三、$.ajax({....}), 配置ajax参数对象

$.ajax({

  url: "请求地址", // 请求地址

  type: "post", // 设置请求类型 (get或post)

  constType: "application/json",  // 设置发送数据的内容格式

  data: JSON.stringify({email:"111@qq.com",password:1111}), // 发送到服务器的数据

  dataType: "json", //  服务器返回数据格式，一般可以省略。

  timeout: 30*1000, // 设置请求超时时间。

  success:function(result,status,xhr){//请求成功，调用的函数。 result 服务器返回的数据，status状态码，xhr js ajax对象

    console.log(result,status,xhr);

  },

  error: function(xhr,status,error){ // 请求出错调用的函数

    console.log(xhr,status,error);

  }

})

$.get("地址",{email:"111@qq.com",password:1111},function(data,status,xhr){

  console.log(data,status,xhr);

}) // get方法的简便写法

$.post("地址",{email:"111@qq.com",password:1111},function(data,status,xhr){

  console.log(data,status,xhr);

}) // post方法的简便写法