学习jQuery的基础使用

老雷PHP全栈开发

发布于 2020-07-02 14:47:44

1.1K0

发布于 2020-07-02 14:47:44

文章被收录于专栏：老雷PHP全栈开发

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，我们常用jQuery来处理Dom\事件\动画\AJAX

jQuery Dom处理

选择器

选择器大家需要深入了解

  $("div")
  $(".class")
  $(".class child");
  $("#id")
  $("div.class") 同级选择器
  $("[href]") 选取所有带有 href 属性的元素。
  a

  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

  $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

  $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery 事件

click dbclick mouseenter mouseleave keyup keydown

	//针对已创建元素

  $(".class").on("click",function(){
    console.log($(this).html());
  })

	//可针对动态创建数据

  $(document).on("click",".class",function(){
    console.log($(this).html());
  })

Dom操作 var el=$(".class"); 处理内容 el.val(); el.html(); el.text(); 增加处理元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容删除元素 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素asdasd 处理class addClass() $("div").addClass("b") - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 $("div").toggleClass("b") 处理css el.css("background-color","yellow"); el.css({"background-color":"yellow","font-size":"200%"});

动画效果

在移动端应该使用css代替js动画

el.show(1000); display:block;flex; 
el.hide(); display:none; 
$(selector).animate({params},speed,callback); 
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });

jQuery遍历

$("#el").parents(".parents");

$("#el").find("span");
$("#el").siblings();

<div id="el">
      <div>a</div>
      <div>b</div>
    </div>

Tabs $("#el").eq(1) 方法返回被选元素中带有指定索引号的元素。

jQuery AJAX

什么是AJAX？ajax是在不刷新页面的情况下，与服务器发生数据交换的技术

  $.get(url,function(res){
    
  },"json")
  $.post(url,data,function(res){
    
  },"json");
  $.post(url,$("form").serialize(),function(res){
    
  },"json");
  
  $.ajax({
    url:url,
    type:"GET",
    data:{
      "action":"add"
    }
    dataType:"json",
    success:function(res){
      
    }
  })

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax