jquery常用

Posted 2021-11-26 huihuihero

$基本语法

• .eq() 从0开始记
• .eq($(this).index())
• .addClass("active")
• .removeClass("active")
• .children()
• .children().eq(2) 第三个孩子
• .parent()
• .siblings()
• .attr("class","active")
• .attr({
  class:"active",
  type:"text",
  aa:"bb"
  "big-name":linzixian //有 - 则加引号，防止被解析成减号
  }) 设置多个属性
• .removeAttr()
• .prop("checked","true") 布尔类型添加属性
• .stop().animate({width:800},2000,linear,function(){})
• .stop().slideDown() slideUp()
• .stop().fadeIn() fadeOut() fadeToggle()
• .css("color","blue")
• .show(1000,function(){})
• .hide()
• .append("<p>哈哈</p>")
• .prepend()
• $("p").appendTo($("div"))
• $("<tr><td>名字</td><td>性别</td></tr>").appendTo("tbody")给表格的tbody里添加一行
• .text($("#txt").val())设置内容并传输到文本
• $("#txt").val("哈哈") 设置内容
• .html()
• .text()
• .val() 内容
• $("text").val("") 清空text的内容
• $("div").empty()
• $("div").remove()
• .focus() 焦点
• .blur()
• .on("click",function(){})
• .off("click") 移除事件绑定
• .delay(2000)
• .prev()
• .next()
• .prevAll()
• .nextAll()

.html() .text() .val()以及$(" ")的差异总结：

• .html() .text() .val()三种方法都是用来读取选定元素的内容；
• .html()是用来读取元素的html内容（包括html标签）；
• .text()用来读取元素的纯文本内容，包括其后代元素；
• .val()是用来读取表单元素的"value"值,常用于input上；
• $("<h3>hello</h3>").appendTo("#username")设置内容并添加到id="username"的标签中
• .html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；
• .html()方法使用在元素集合上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在元素集合上时，只能读取第一个表单元素的"value"值，但是.text()不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容；
• .html(htmlString) .text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容；

`$("<span><span>").text($("input").val())` 解析
1先通过 `$(" ")` 方法设置<span></span>盒子，
2再用 `$("input").val()` 方法将input文本框里的数据读取出来，
3再用 `.text()` 方法写入到span标签里

`$(input).val("")` 设置input文本框里的数据为空

• .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容；