了解简单的JQ

迈不过友情╰ 2022-11-04 14:25 141阅读 0赞

最近接触了一个有点历史的项目JQ

挺烦的   不过呢  也学到点JQ简单的语法

记录一下学习到的语法

JQ操作DOM

$(selector).action()

*  美元符号定义JQ
 *  选择符（selector）"查询"HTML元素
 *  JQ的action就是操作dom

1.$(this).hide()-隐藏当前元素
    2.$("p").hide()-隐藏所有段落
    3.$(".test").hide()-隐藏所有class="test"的所有元素
    4.$("#test").hide()-隐藏所有id="test"的所有元素

在文档加载后激活函数:为了防止文档在完全加载（就绪）之前运行 jQuery 代码

$(document).ready(function(){})

JQ元素选择器

*  JQ使用css选择器来选取HTML元素。
 *  $("p")选取<p>元素
 *  $("p.intro")选取所有class="intro"的元素
 *  $("p\#demo")选取所有id="demo"的<p>元素

JQ属性选择器

*  $("\[href\]")选取所有带有href属性的元素。
 *  $("\[href = '\#'\]")选取所有带有href值等于'\#'的元素
 *  $("\[href!='\#'\]")选取所有带有href值不等于“\#”的元素
 *  $("\[href$='.jpg'\]")选取所有href值以“.jpg”结尾的元素

<table> 
 <tbody> 
  <tr> 
   <td>语法</td> 
   <td style="width:349px;">描述</td> 
  </tr> 
  <tr> 
   <td>$(this)</td> 
   <td style="width:349px;">当前HTML元素</td> 
  </tr> 
  <tr> 
   <td>$("p")</td> 
   <td style="width:349px;">所有p元素</td> 
  </tr> 
  <tr> 
   <td>$("p.into")</td> 
   <td style="width:349px;">所有class="into"的p元素</td> 
  </tr> 
  <tr> 
   <td>$("#into")</td> 
   <td style="width:349px;">所有id="into"的元素</td> 
  </tr> 
  <tr> 
   <td>$("ul li:first")</td> 
   <td style="width:349px;">每个&lt;ul&gt;的第一个&lt;li&gt;元素</td> 
  </tr> 
  <tr> 
   <td>$("[href$='.jpg']")</td> 
   <td style="width:349px;">所有带有以“.jpg"结尾的属性值的href属性</td> 
  </tr> 
  <tr> 
   <td>$("div#intro .head")</td> 
   <td style="width:349px;">id="intro"的&lt;div&gt;元素中所有class="head"的元素</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td style="width:349px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

JQ函数事件

事件处理程序指的是当HTML中发生某些事件时调用的方法。

// 点击按钮事件

$("button").click(function(){})

// 隐藏所有p元素

$("p").hide();

<table> 
 <tbody> 
  <tr> 
   <td>Event函数</td> 
   <td style="width:425px;">绑定函数至</td> 
  </tr> 
  <tr> 
   <td>$(selector).ready(function())</td> 
   <td style="width:425px;">函数初始化</td> 
  </tr> 
  <tr> 
   <td>$(selector).click(function())</td> 
   <td style="width:425px;">点击事件</td> 
  </tr> 
  <tr> 
   <td>$(selector).dbclick(function())</td> 
   <td style="width:425px;">双击事件</td> 
  </tr> 
  <tr> 
   <td>$(selector).focus(function())</td> 
   <td style="width:425px;">聚焦事件</td> 
  </tr> 
  <tr> 
   <td>$(selector).mouseover(function())</td> 
   <td style="width:425px;">鼠标悬浮事件</td> 
  </tr> 
 </tbody> 
</table>

JQ显示和隐藏

JQ hide()和show()

$("p").hide();
    $("p").show();

JQ toggle()切换

$("button").click(function(){
      $("p").toggle();
    });

JQ淡入淡出

JQ fadeIn()方法用于淡入已隐藏的元素
    $(selector).fadeIn(speed,callback);
    JQ fadeIn()方法用于淡出可见元素
    $(selector).fadeOut(speed,callback);
    fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
    $(selector).fadeTo(speed,opacity,callback);

JQ滑动

// 向下滑动元素
    $(selector).slideDown(speed,callback)
    // 向上滑动
    $(selector).slideUp(speed,callback)
    // 向上滑动和向下滑动之间切换
    $(selector).slideToggle(speed,callback)

JQ动画

//animate()方法允创建自定义动画
    $(selector).animate({params},speed,callback);
    // 操作一个属性
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:'250px'})
        })
    })
    // 多个属性
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                left: '250px',
                opacity: '0.5',
                height: '150px',
                width: '150px'
            })
        })
    })

停止动画

JQ stop()滑动
    $(selector).stop(stopAll,goToEnd);

Chaining允许我们在一条语句中用多个JQ方法

$(document).ready(function(){
        $("button").click(function(){
            $("#p1").css("color":"red").slideUp(2000).slideDown(2000)
        })
    })

JQ HTML

获取内容 -text(),html()以及val()

text() -设置或返回所选元素的文本内容
    html() -设置或返回所选元素的内容
    val() -设置或返回表单字段的值
    
    
    //实例
    $(document).ready(function(){
        $("#btn1").click(function(){
            alter("Text" + $("#test").text());
        })
        $("#btn2").click(function(){
            alter("Text" + $("#test").html());
        })
    })
    
    $(document).ready(function(){
        $("#button").click(function(){
            alter("value"+$("#test").val())
        })
    })

获取属性-attr()

JQ attr()方法用于获取属性值

//一个
    $(document).ready(function(){
        $("button").click(function(){
            alert($("#w3s").attr("href"))
        })
    })
    // 多个
    $("button").click(funciton(){
        $("#w3s").attr({
            "href":"http://www.w3school.com.cn/jquery",
            "title": "W3School jQuery Tutorial"
        })
    })

添加新的HTML内容

*  append()-在被选元素的结尾插入内容
 *  prepend()-在被选元素的开头插入内容
 *  after() -在被选元素之后插入内容
 *  before() -在被选元素之前内容

$(document).ready(function(){
        $("#btn").click(function(){
            $("p").append("<b>Appended item</b>")
        })
       $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
      });
    })

JQ删除元素

*  remove() -删除被选元素
 *  empty() -从被选元素中删除子元素

$(document).ready(function(){
        $("button").click(function(){
            $("#div1").remove()
        })
    })

过滤被删除的元素、

$("p").remove(".italic")

JQ操作css

*  addClass() -向被选元素添加一个或多个类
 *  remove() -从被选元素删除一个或多个类
 *  toggleClass() -对被选元素进行添加/删除类的切换操作
 *  css() -设置或返回样式属性
 *  removeClass() -删除指定class的属性
 *  innerWidth()返回元素的宽度（内边距）
 *  innerHeight()返回元素的高度（内边距）
 *  outerWidth()返回元素的宽度（内边距和边框）
 *  outerHeight()返回元素的高度（内边距和边框）
 *  width():浏览器的宽度
 *  height():浏览器的高度

向上遍历DOM树

*  parent():被选元素直接的父元素
 *  parents()：被选元素的所有祖先元素，一直到文档的根元素
 *  parentsUntil()：返回介于两个给定元素之间的所有祖先元素

// 父元素
    <div class="ancestors">
      <div style="width:500px;">div (曾祖父)
        <ul>ul (祖父)  
          <li>li (直接父)
            <span>span</span>
          </li>
        </ul>   
      </div>
    
      <div style="width:500px;">div (祖父)   
        <p>p (直接父)
            <span>span</span>
          </p> 
      </div>
    </div>
    
    $(document).ready(function(){
      $("span").parent().css({"color":"red","border":"2px solid red"});
    });
    
    
    
    <body class="ancestors">body (曾曾祖父)
      <div style="width:500px;">div (曾祖父)
        <ul>ul (祖父)  
          <li>li (直接父)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    $(document).ready(function(){
      $("span").parents().css({"color":"red","border":"2px solid red"});
    });
    
    
    
    <body class="ancestors"> body (曾曾祖父)
      <div style="width:500px;">div (曾祖父)
        <ul>ul (祖父)  
          <li>li (直接父)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    $(document).ready(function(){
      $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
    });

JQ后代：子，孙，曾孙

*  child():方法返回被选元素的所有子元素
 *  find()：方法返回被选元素的后代元素，一路向下直到最后一个后代

<div class="descendants" style="width:500px;">div (current element) 
      <p>p (子)
        <span>span (孙)</span>     
      </p>
      <p>p (child)
        <span>span (孙)</span>
      </p> 
    </div>
    
    $(document).ready(function(){
      $("div").find("span").css({"color":"red","border":"2px solid red"});
    });

JQ同胞

DOM树中水平遍历

*  siblings():被选元素的所有同胞元素
 *  next()：被选元素的下一个同胞元素
 *  nextAll()：被选元素的所有跟随的同胞元素
 *  nextUntil()：两个给定参数之间的所有跟随同胞的元素
 *  prev()
 *  prevAll()prevUntil()

JQ遍历-过滤

*  first():被选元素的首个元素
 *  last()：被选元素的最后一个元素
 *  eq():被选元素中带有指定索引号的元素
 *  filter():
 *  not():

JQ AJAX\`