<a href="#" index=‘2‘>2</a>
$(function () { $(‘a‘).prop(‘href‘, ‘www.baidu.com‘) console.log($(‘a‘).prop(‘href‘)); console.log($(‘a‘).attr(‘index‘)); })
<div class="item">1</div> <div class="item">2</div> <div class="item">3</div>
$(function () { var sum = 0 var arr = [‘red‘, ‘blue‘, ‘green‘] $(".item").each(function (i, domEle) { // 回调函数第一个参数一定是索引号 索引号可以指定 console.log(i); // 回调函数的第二个参数一定是DOM元素对象 // dom对象没有css方法 $(domEle).css(‘color‘, arr[i]) console.log(domEle); sum += parseInt($(domEle).text()) console.log(sum); }) // 循环方法2 // 可以遍历数据,对象 $.each($(".item"), function (i, ele) { console.log(i); }) })
<ul> <li></li> </ul> <div>我是第一个</div>
$(function () { // 创建元素 var li = $("<li>OK</li>") // 内部添加 $("ul").append(li) //内部添加并且放到内容最后面 $("ul").prepend(li) //内部添加并且放到内容最前面 // 外部添加 var div = $("<div>我是后添加的</div>") $("div").after(div) //放到目标元素后面 $("div").before(div) //放到目标元素前面 //删除元素 // $("ul").remove() //删除匹配元素的本身 // $("ul").empty() //删除匹配元素的子节点 $("ul").html("") //删除匹配元素的子节点 })
<div class="box"></div>
$(function () { // 方法1 $(".box").on({ mouseenter: function () { $(this).css("background", ‘red‘) }, click: function () { $(this).css("background", "green") } }) // 方法2 $(".box").on("mouseenter mouseleave", function () { $(this).toggleClass("current") }) })
<ul> <li>1</li> <li>2</li> </ul>
$(function () { $("ul").on("click", "li", function () { alert("ok") }) })
<ol> <li>123</li> <li>123</li> <li>123</li> </ol>
$("ol").on("click", "li", function () { alert("ok") }) var li = $("<li>我是后来添加的</li>") $("ol").append(li)
$("ol").off() //这个是解除了ol身上所有的事件 $(".box").off("mouseenter") //这个是解除了box身上的鼠标经过事件 $(".box").off("ul", "li") //解除事件委托
$(function () { $(".box").on("click", function () { alert("ok") }) // 自动触发 // 1、元素.事件 $(".box").click(); // 2、元素.trigger("事件") $(".box").trigger("click") // 3、$(".box").triggerHabdler("事件") 就是不会触发元素的默认行为 $(".box").triggerHabdler("click") })
原文:https://www.cnblogs.com/xf2764/p/12759180.html