JQuery基本操作

Posted 2070393244com

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery基本操作相关的知识,希望对你有一定的参考价值。

console.info($("#div1").text());
console.info($("#div1").length);
console.debug($("div").length);
   console.debug("-----------------------------------------------------------------------------------------");
/*获取ipput并列的div层*/
  
console.debug($("input,div").text());
   console.debug("-----------------------------------------------------------------------------------------");
 /*获取div并列的input层*/
  
console.debug("-----------------------------------------------------------------------------------------");
   console.debug($("div>input").text());
   console.debug("-----------------------------------------------------------------------------------------");
   /*匹配input紧接在div后面的所有元素*/
  
console.debug($("div+input").length);
   console.debug($("div+input").text());
   console.debug("-----------------------------------------------------------------------------------------");
   /*匹配div之后的input的所有元素*/
  
console.debug($("div~input").length);
   console.debug($("div~input").text());
  /* jquery 获取值相关的方法,如果针对多个元素进行操作,那么返回的第一个元素的值;
   jquery 设置值相关的方法,如果针对多个元素进行操作,那么设置的是所有的元素值;*/
  /*设置CSS样式*/
 
$("#div1").css("color","red").css("fontSize","30px");
  /*追加字符串*/
 
$("#div1").css("color","red").css("fontSize","30px").append("强骏梦");
  /*所有字符串匹配的标签添加内容*/
 
$("div div").append("XXXXXXXXXXXXXXXXXXX");
  /*再匹配元素后添加兄弟标签*/
  
$("div div").after("<p>1233123131231313131312331231313131311313131</p>");
   /*再匹配元素前添加兄弟标签*/
  
$("div div").before("<p style=‘color: red‘>1111111111111111111111111111111111111111</p>");
   /*把匹配到的元素插入到一个层里面*/
  
$("div div").insertBefore($("#div1"));
   /*
   *
删除
    empty(): 删除匹配的元素所有的子节点。
    remove([jquery选择器]):DOM中删除所有匹配的元素。

    * */
   /*删除所有子节点*/
  
$("div div").empty();
   /*删除所匹配的元素*/
  
$("div div").remove();

   /*替换*/
  
$("div div").replaceWith("<P STYLE=‘color: green‘>QQQQQQQQQQQQQQQQQQQQQQQ</P>");

   /*克隆*/
   /*
   * clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
    clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本
    * */
  /* $("p").clone(true).append(document.body);*/


   /*属性操作checked*/
 
/$("#btn").click(function () {
       alert("312");
   });

 

 

 

console.debug($("#div1 .s1").length);
/*获取div层下类选择器为是s1的层,并且为指定的层,并显示层中的内容*/
console.debug($("#div1 .s1").get(1).innerHTML);
console.debug("------------------------------------");
console.debug($("#div1 .s1").get(1).innerText);
console.debug("------------------------------------");
/*打印所匹配的所有层*/
var str=$("#div1 .s1");
for(var i=0;i<str.length;i++){
    console.debug($("#div1 .s1").get(i).innerText);
}
/*改变匹配到的所有层内容的属性*/
$("#div1 .s1").css("color","red");
console.debug("------------------------------------");
/*改变指定匹配元素的属性*/
console.debug($("#div1 .s1").get(2).innerHTML);

$("*")

选取所有元素

$(this)

选取当前 HTML 元素

$("p.intro")

选取 class intro <p> 元素

$("p:first")

选取第一个 <p> 元素

$("ul li:first")

选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")

选取每个 <ul> 元素的第一个 <li> 元素

 

 $("[href]")

选取带有 href 属性的元素

$("a[target=‘_blank‘]")

选取所有 target 属性值等于 "_blank"  <a> 元素

$("a[target!=‘_blank‘]")

选取所有 target 属性值不等于 "_blank"  <a> 元素

$(":button")

选取所有 type="button"  <input> 元素 <button> 元素

$("tr:even")

选取偶数位置的 <tr> 元素

$("tr:odd")

选取奇数位置的 <tr> 元素

     

 

 $(document).ready():允许我们在文档完全加载完后执行函数

click():当按钮点击事件被触发时会调用一个函数

dblclick():当双击元素时,会发生 dblclick 事件

mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件

mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件

mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件

  hover():用于模拟光标悬停事件

focus():当元素获得焦点时,发生 focus 事件

blur():元素失去焦点时,发生 blur 事件

 









































































以上是关于JQuery基本操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)