JQuery基本操作

Posted 2020-12-29 2070393244com

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 事件