文章 2024-04-03 来自:开发者社区

用JQuery实现选中select里面的option显示对应的div

HTML: <select name="" οnchange="select(this)">   <option value="1">题目一</option>   <option value="2">题目二</option>...

文章 2024-03-20 来自:开发者社区

jquery实现单击div切换背景,再次单击回到原来样式

首先来看看效果图: 1.这是默认的的div样式: 2.当我们单击第一个div时的样式: ...

jquery实现单击div切换背景,再次单击回到原来样式

jQuery开发教程

43 课时 |
16413 人已学 |
免费
开发者课程背景图
文章 2024-03-20 来自:开发者社区

jQuery遍历div,判断是否为空,为空时执行某个操作

以下运行结果: 代码如下: <!DOCTYPE html> <html> <...

jQuery遍历div,判断是否为空,为空时执行某个操作
文章 2024-01-17 来自:开发者社区

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏js方式一首先是进行js演示和讲解。首先是display的方法,display属性的特点为,可以使得div隐藏之后释放占用的页面空间。原理就是给div盒子的样式中的display属性加上一个"none"值// 获取对应盒子的id document.getElem...

原生js与jQuery显示隐藏div的几种方法
文章 2023-11-15 来自:开发者社区

jquery点击删除按钮,删除当前的div

现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要写一个this事件即可。参考代码如下:<!DOCTYPE html> <html lang="...

文章 2023-11-10 来自:开发者社区

jquery实现下拉框选中对应的div

这是一个很简单的功能,jquery实现下拉框选中对应的div。虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应的内容。<!DOCTYPE html> <html> <head> <meta charset="UTF-...

文章 2023-11-09 来自:开发者社区

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面)<!DOCTYPE html> &...

文章 2023-11-06 来自:开发者社区

jQuery清空div内容

jQuery的empty()方法:可以清空/删除指定元素下的所有子节点和内容 $(selector).empty()$("#id_for_div").empty(); $("div:eq(0)").empty()<div id="mochu"> <p>这里是P标签内容</p> ...

文章 2023-11-03 来自:开发者社区

jQuery方式追加div覆盖

containerSlideBound.x + containerSlideBound.width) { //需要滑动 var scrollLeft = activeSlideBound.x - containerSlideBound.x container.scrollLeft = scrollLeft; } } //==========news end========== function go() { var elementById = document.getElementById("goToPage").value; if (elementById.length < 1 || elementById == undefined || elementById >10 || elementById == 0) { return; } else if (elementById > 1) { window.location.href = "//www.aliyun.com/sswb/channel_315338_" + elementById + ".html"; } else { window.location.href = "//www.aliyun.com/sswb/channel_315338.html"; } }; var h = document.getElementsByClassName("banner-content-top")[0].offsetHeight; var dots = document.querySelectorAll('.click-item'); var text = document.querySelectorAll('.text-box'); var btn = document.querySelectorAll('.ebook-info-item-btn'); var wrap = document.querySelector('.img-min'); var ebookbox = document.querySelectorAll('.img-box-ebook'); for (var i = 0; i < dots.length; i++) { (function (i) { dots[i].onclick = function () { for (var index = 0; index < dots.length; index++) { dots[index].className = 'click-item' text[index].className = 'text-box' btn[index].className = 'ebook-info-item-btn' ebookbox[index].className = 'img-box-ebook' } text[i].className = 'text-box show' btn[i].className = 'ebook-info-item-btn show' dots[i].className = 'click-item actives' ebookbox[i].className = 'img-box-ebook big' if(i == 0){ wrap.style.transform = "translate3d(15px, 0px, 0px)" } if(i == 1){ wrap.style.transform = "translate3d(-40px, 0px, 0px)" } if(i == 2){ wrap.style.transform = "translate3d(-100px, 0px, 0px)" } } })(i); } // 通过js控制当前选择 let selects = document.querySelectorAll('.select'); if(document.getElementsByClassName("detail-list-course")[0]){ var urlw = document.getElementsByClassName("detail-list-course")[0].offsetWidth; } let urlWidth = document.getElementsByClassName("course-url") // console.log(selects); // 找到图片组合 let images = document.querySelector(".course-info-box"); // 循环绑定点击事件 selects.forEach((slt,i) => { slt.addEventListener('click', (e) => { // 获取id let index = i; if(document.getElementsByClassName("course-info-item")[0]){ var w = document.getElementsByClassName("course-info-item")[0].offsetWidth; // 控制样式变化 let deg = w *i images.style.transform = `translate3d(-${deg}px, 0px, 0px)`; } // 找到原select对象、并移出样式 let slt_orgin = document.querySelector('.check'); if(slt_orgin){ slt_orgin.classList.remove('check'); // 当前select对象增加样式 slt.classList.add('check'); } urlWidth[i].style.width = urlw + 'px' }); }); window.onresize = function(){ images.style.transform = `translate3d(0px, 0px, 0px)`; // 找到原select对象、并移出样式 let slt_orgin = document.querySelector('.check'); if(slt_orgin){ slt_orgin.classList.remove('check'); // 当前select对象增加样式 selects[0].classList.add('check'); } urlWidth[0].style.width = urlw + 'px' } let num = 0 // 通过js控制当前选择 let recommendItem = document.querySelectorAll('.recommend-click-items') let texts = document.querySelectorAll('.recommend-list')[0] if(recommendItem){ // 循环绑定点击事件 recommendItem.forEach((slt,i) => { slt.addEventListener('click', (e) => { // 获取id let numbers = 0; if (i == 0){ numbers = 0 }else { numbers = 180 } if(texts){ texts.style.transform=`translate3d(0px, -${numbers}px, 0px)` } // 找到原select对象、并移出样式 let act_orgin = document.querySelector('.rmActives'); if(act_orgin){ act_orgin.classList.remove('rmActives'); // 当前select对象增加样式 slt.classList.add('rmActives'); } }); }); } let relatedSwiper = document.getElementsByClassName('related-course-pagination') let relatedItemLength = document.getElementsByClassName('related-course-itemBox').length if(relatedItemLength<=2){ if(relatedSwiper[0]){ relatedSwiper[0].innerHTML='\n \n' } } if(relatedItemLength>2&&relatedItemLength<=4){ relatedSwiper[0].innerHTML='\n \n \n ' } if(relatedItemLength>4&&relatedItemLength<=6){ relatedSwiper[0].innerHTML='\n \n \n \n ' } let reShowScm = document.querySelectorAll('.related-course-itemBox a') let reClickItem = document.querySelectorAll('.related-course-pagination .swiper-pagination-bullet') for (var i = 0; i < reClickItem.length; i++) { (function (i) { reClickItem[i].onclick = function () { console.log(i) for (var index = 0; index < reClickItem.length; index++) { reClickItem[index].className = 'swiper-pagination-bullet related-pagination-bullet' } reClickItem[i].className = 'swiper-pagination-bullet related-pagination-bullet swiper-pagination-bullet-active' if(i == 0){ document.querySelectorAll(".related-course-box")[0].style.transform = `translate3d(0px, 0px, 0px)` reShowScm.forEach((item,index)=>{ if(index<=2){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } if(i == 1){ document.querySelectorAll(".related-course-box")[0].style.transform = `translate3d(0px, -190px, 0px)` reShowScm.forEach((item,index)=>{ if(index>2&&index<=4){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } if(i == 2){ document.querySelectorAll(".related-course-box")[0].style.transform=`translate3d(0px, -380px, 0px)` reShowScm.forEach((item,index)=>{ if(index>4&&index<=6){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } } })(i); } let ismore = document.querySelectorAll('.activity-card') if(ismore.length > 1){ ismore[1].style.display = "none" }