jq判断html是否有img标签,jQuery确定页面上是否存在元素

我在这里用以下插件回答了同样的问题。有关创建插件的详细信息,请访问答案。

如果元素存在,以下插件将允许您使用回调功能(保持与jQuery样式标记内联)。因此,对于您的示例,您可能会执行以下操作:

$('select[name="modifier_option"]').exist(function() {

if ($(this).val() > 0) {

/* DO WORK */

}

else {

/* is not greater than 0

DO OTHER WORK */

}

})

插入

(function($) {

if (!$.exist) {

$.extend({

exist: function() {

var ele, cbmExist, cbmNotExist;

if (arguments.length) {

for (x in arguments) {

switch (typeof arguments[x]) {

case 'function':

if (typeof cbmExist == "undefined") cbmExist = arguments[x];

else cbmNotExist = arguments[x];

break;

case 'object':

if (arguments[x] instanceof jQuery) ele = arguments[x];

else {

var obj = arguments[x];

for (y in obj) {

if (typeof obj[y] == 'function') {

if (typeof cbmExist == "undefined") cbmExist = obj[y];

else cbmNotExist = obj[y];

}

if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];

if (typeof obj[y] == 'string') ele = $(obj[y]);

}

}

break;

case 'string':

ele = $(arguments[x]);

break;

}

}

}

if (typeof cbmExist == 'function') { // has at least one Callback Method

var exist = ele.length > 0 ? true : false; // strict setting of boolean

if (exist) { // Elements do exist

return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });

}

else if (typeof cbmNotExist == 'function') {

cbmNotExist.apply(ele, [exist, ele]);

return ele;

}

else {

if (ele.length <= 1) return ele.length > 0 ? true : false;

else return ele.length;

}

}

else { // has NO callback method, thus return if exist or not based on element existant length

if (ele.length <= 1) return ele.length > 0 ? true : false; // strict return of boolean

else return ele.length; // return actual length for how many of this element exist

}

return false; // only hits if something errored!

}

});

$.fn.extend({

exist: function() {

var args = [$(this)];

if (arguments.length) for (x in arguments) args.push(arguments[x]);

return $.exist.apply($, args);

}

});

}

})(jQuery);

的jsfiddle

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
抱歉,我作为一名语言模型,无法为您提供完整的商城前端页面代码。不过,我可以为您提供一些基本的HTML、CSS、JavaScript和jQuery代码示例,以帮助您开始构建您的商城前端页面HTML代码示例: ``` <!DOCTYPE html> <html> <head> <title>My Online Store</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Welcome to My Online Store</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </header> <main> <section class="products"> <h2>Our Products</h2> <div class="product"> <img src="product1.jpg" alt="Product 1"> <h3>Product 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button class="buy">Buy Now</button> </div> <div class="product"> <img src="product2.jpg" alt="Product 2"> <h3>Product 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button class="buy">Buy Now</button> </div> <div class="product"> <img src="product3.jpg" alt="Product 3"> <h3>Product 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button class="buy">Buy Now</button> </div> </section> </main> <footer> <p>© 2021 My Online Store. All rights reserved.</p> </footer> <script src="script.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </body> </html> ``` CSS代码示例: ``` * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; font-size: 16px; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; } nav ul li a { color: #fff; display: block; padding: 10px; text-decoration: none; } main { padding: 20px; } .products { display: flex; flex-wrap: wrap; justify-content: space-between; } .product { background-color: #f2f2f2; border: 1px solid #ddd; margin-bottom: 20px; padding: 20px; text-align: center; width: calc(33.33% - 20px); } .product img { max-width: 100%; } .product h3 { margin-top: 10px; } .product p { margin-top: 10px; } .product button.buy { background-color: #333; border: none; color: #fff; cursor: pointer; margin-top: 10px; padding: 10px; transition: background-color 0.3s ease; } .product button.buy:hover { background-color: #555; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` JavaScript代码示例: ``` // Get all buy buttons const buyButtons = document.querySelectorAll('.buy'); // Handle buy button clicks buyButtons.forEach(button => { button.addEventListener('click', event => { alert('Product purchased!'); }); }); ``` jQuery代码示例: ``` // Get all buy buttons using jQuery const buyButtons = $('.buy'); // Handle buy button clicks using jQuery buyButtons.on('click', event => { alert('Product purchased!'); }); ``` 请注意,以上示例代码只是为了帮助您开始构建您的商城前端页面,并不是一个完整的解决方案。您需要根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值