<!-- 返回顶部 --> <div class="flex align-items-center justify-content-center goTop">回顶部</div> $(window).scroll(function () { /* 判断滚动条 距离页面顶部的距离 100可以自定义*/ if ($(window).scrollTop() > 100) { $(".goTop").fadeIn(100); /* 这里用.show()也可以 只是效果太丑 */ $('.goTop').css({ display: 'flex' }) } else { $(".goTop").fadeOut(100); } }); // 回顶部 $('.goTop').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; })
不多说了，看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax对接</title> </head> <body> <h1>标题</h1> <ul class="ul"></ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $.ajax({ url:'http://api.douban.com/v2/movie/top250?start=0&count=25', type:'GET', //GET async:true, //或false,是否异步 data:{ // 需要发送到后端的数据 // start: 0, // count: 25, }, timeout:5000, //超时时间 dataType:'jsonp', //返回的数据格式：json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) console.log('发送前') }, success:function(data,textStatus,jqXHR){ // 请求成过回调函数 console.log(data) $('h1').text(data.title) for (var i = 0; i < data.subjects.length; i++) { var title = data.subjects[i].title var img = data.subjects[i].images.small // console.log(title) $('.ul').append(`<li>${title}<br /><img src="${img}"></li>`) } }, error:function(xhr,textStatus){ console.log('错误') console.log(xhr) console.log(textStatus) }, complete:function(){ console.log('结束') } }) </script> </body> </html>
1、通过npm安装jQuery组件： npm i jquery --save 2、在 build/webpack.base.conf.js 里加入: const webpack = require("webpack") module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), // webpack 使用 jQuery，如果是自行下载的 // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'), // 如果使用NPM安装的jQuery 'jquery': 'jquery' } }, // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], // 其他代码... } 3、重新运行 npm run dev
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery工具</title> </head> <body> <input type="password" /> <input type="password" /> <div id="test">Click Here!</div> <script src="jquery.js"></script> <script src="index.js"></script> </body> </html> var arr = [1,2,3,4,5,6,7,8,9] $.each(arr,function(i,item){ // console.log(i + ':' + item) // console.log(`${i}:${item}`) }) // arr.forEach(function(itme,i){ // console.log(`${i}:${itme}`) // }) var p = { name:'张三', age:6, isMale:true } // $.each(p,(key,val)=>{ // // console.log(val) // // console.log(`${key}:${val}`) // console.log(`${key}:${p[key]}`) // }) // for(var key in p){ // console.log(`${key}:${p[key]}`) // } // var newArr = $.map(arr,(item,i)=>{ // // console.log(`${i}:${item}`) // return item * i // }) // console.log(newArr) // 测试是否为数组 // console.log($.isArray([1,3])) var abc = ['a','b','c','d'] // merge合并数组 会将字符串拆分成字符合并到数组中 字符串也是一个类似数组的对象 // var arrABC = $.merge(abc,'wang') // arrABC = arr.concat(abc) // console.log(arrABC) // makeArray将一个类数组对象转换成数组对象 // console.log($.makeArray('百度')) // Array.prototype.slice.call('百度') // Array.form() // grep按照某种条件来过滤数组 // var events =$.grep(arr,function(item,index){ // item 数组元素的当前值 // index 当前值的下标 // return item % 2 == 0 // }) // console.log(events) // var odds = arr.filter((item,i,arr)=>{ // return !!(item % 2 == 0) // }) // console.log(odds) // var student = { // name:'张三', // age:3, // sayHellow:function(){ // console.log(`我的名字是${this.name},很高兴认识你`) // } // sayHellow:()=>{ // console.log(`我的名字是${this.name},很高兴认识你`) // 箭头函数不会形成function作用域 所以其中的this指向全局作用域window // } // } // var teach = { // age:4, // coures:'H5', // teac:function(){ // console.log(`我是${this.coures}老师,很高兴认识你`) // } // } // var methods = { // eat:()=>{ // console.log('我饿了') // }, // sleep:()=>{ // console.log('我要睡觉了') // } // } // // extend 合并对象 // var result = $.extend(student,teach) // console.log(student) // console.log(teach) // console.log(result) // $.extend(student,methods) // $.extend(teach,methods) // student.eat() // teach.sleep() var student = { name:'zhangsan', age:3, length:6, '0':'zero', '3':'three' } var arr1 = ['a','b','c'] // $.extend(arr,student) // console.dir(arr) // for(var i = 0;i<arr.length;i++){ // console.log(arr[i]) // } // $.extend(student,arr) // console.dir(student) // var newArr = $.extend(arr,arr1) // console.log(newArr) // var student = { name: "John", location: {city: "Boston",county:"USA"} } // var teacher = { last: "Resig", location: {state: "MA",county:"China"} } // // true深层拷贝 // $.extend(true,student,teacher) // console.dir(student) // var student = { // name :"wang" // } // $.proxy方法接受一个已有的函数 并返回一个特定上下文的函数 // $('body').css('height','400px').click($.proxy(function(a1,a2,a3,ev){ // alert(this.name) // console.log(a1 + a2) // console.log(ev) // console.log(arguments) // },student,123,'abc','ccc')) // $('body').css('height','400px').click(function(a1,a2,ev){ // console.log(this.name) // console.dir(arguments) // }.bind(student,123,'abc')) var obj = { name: "John", test: function() { alert( this.name ); $("#test").unbind("click", obj.test); } }; // $("#test").click( jQuery.proxy( obj, "test" ) ); // $("#test").click( jQuery.proxy( obj.test, obj ) );
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery动画参数</title> <style> progress{ width:600px; } </style> </head> <body> <progress value="0"></progress> <h1>jQuery动画参数</h1> <button>关闭效果</button> <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项</li> </ol> <script src="jquery.js"></script> <script src="jqueryColor.js"></script> <script src="index.js"></script> </body> </html> $(':header').click(function() { $(this).css('position','absolute') $('ol').css('position','relative').animate({ left:400, backgroundColor:'blue', color:'white' },{ duration:5*1000, // 每个动画元素的每个动画属性将调用的函数。 // 这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。 // step:function(value,fx){ // console.log('cccccccccccccccccccc') // // value每一步动画属性的数字值 // // fx jQuery.fx 原型对象的一个引用 // // 包含更多属性 例如elme属性值得是当前执行的元素 // console.log(value) // console.log(fx.elem) // console.log(fx.start) // console.log(fx.end) // console.log(fx.prop) // if(fx.prop == 'left'){ // / $(':header').css('top',value + 'px') // } // } // 每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数 // progress:function(animate,progress,ms){ // console.log(animate) // console.log(progress) // console.log(ms) // $('progress').val(progress) // } // }).animate({ // top:400, // backgroundColor:'red' // },{ // duration:3*1000, // progress:function(animate,progress,ms){ // console.log(animate) // console.log(progress) // console.log(ms) // $('progress').val(progress) // } }) }) $('button').click(function(){ console.log('ccc') // 禁止动画 // $.fx.off = true // jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率 // $.fx.interval = 500 })
jQuery布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery布局</title> <style> div { width: 300px; height: 300px; border: 8px solid red; padding: 0; margin: 50px; } </style> </head> <body> <div> 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 </div> <button>获取位置</button> <script src="jquery.js"></script> <script> var div = document.querySelector('div') var btn = document.querySelector('button') btn.onclick = function () { console.log(div.clientWidth) } console.log($('div').height()) console.log($('div').width()) console.log($('div').innerHeight()) console.log($('div').innerWidth()) console.log($('div').outerHeight()) console.log($('div').position()) // 相对于父元素的偏移 </script> </body> </html> jQuery效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery效果</title> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } span { color: red; } </style> </head> <body> <h1>jQuery效果</h1> <small>测试专用小标签</small> <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项</li> </ul> <button id="show">Show Length of Queue</button> <span></span> <div></div> <button id="ff">fff</button> <script src="jquery.js"></script> <script src="jqueryColor.js"></script> <script src="index.js"></script> </body> </html> jQuery要实现动画中颜色的变化，需要加载jQuery.color.js插件 $('ul').click(function () { // $('ul,small').toggle(5*1000,function () { // alert($(this).text() + '动画完成') // }) // $('ul,small').fadeToggle(5*1000,function () { // alert($(this).text() + '动画完成') // }) // $('ul,small').fadeTo(5*1000,0.5,'linear',function () { // alert($(this).text() + '动画完成') // }) // $('ul,small').fadeTo(5*1000,0.5,'linear',function () { // alert($(this).text() + '动画完成') // }) // $('ul,small').slideToggle(5*1000,'linear',function () { // alert($(this).text() + '动画完成') // }) // 自定义动画及链式动画 // 使用Jquery.color.js插件支持颜色动画 var coords = $('ul').offset() // animate()方法执行css属性集的自定义动画 // $('ul').css('position','absolute').animate({ // 'left':400, // 'line-height':32, // 'color':'blue' // },5*1000).animate({ // top:500, // lineHeight:'120%', // color:'red' // },3*1000).animate({ // left:coords.left, // top:coords.top, // lineHeight:'1.5rem', // color:'#000' // },4*1000) // $('ul').css('position','absolute') // .fadeTo(3*1000,0.3) // .animate({ // left:'+=100', // widht:['toggle','swing'], // height:['toggle','linear'] // // left:300 // },3*1000) // delay方法延迟动画 // $('ul').slideToggle(2*1000) // .delay(3*1000) // .slideToggle(2*1000) // var color = 'red' // function changeColor(){ // $('ul').animate({ // backgroundColor:color, // },1000,function(){ // color = $.Color(color) // color = color.hue(color.hue() +60) // changeColor() // }) // } // changeColor() // $('ul').css('position','absolute').animate({ // left:300, // color:'blue' // },10*1000,function () { // alert('left动画完成') // }).animate({ // top:400, // },5*1000,function(){ // alert('top动画完成') // }) }) // $(':header').click(function(){ // console.log('ffffff') // // $('ul').stop(true,true) // // $('ul').finish() // }) $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); });
html <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项</li> <li>第6项</li> <li>第7项</li> </ol> <hr> <b>Hello</b> <p>, how are you?</p> <script src="jquery.js"></script> <script src="index.js"></script> JavaScript // 使用jquery创建标签并添加到页面上 // $('ul').append('<li>Node.js</li>') // $('ul').append(document.querySelectorAll('ol li')) // $('ol').append($('ul li')) // $('ul>li').append(function(index,html){ // console.log(html) // return '<-><i>' + (index +1) + '</i>' // }) // $('<span>-------------</span>').appendTo('li') // $('li').append('<span>-------------</span>') // $('ol,ul,body').prepend('<li>我有分身术</li>') // $('li').after('<li>我是保镖1</>') // $('li').before('<li>我是保镖2</>') // $('<hr>').insertAfter('li:nth-child(1)') // $('<hr>').insertBefore('li:first') // jQuery提供的包裹功能 // wrap()方法把每个被选元素放置在指定的HTML内容或元素中 // $('li').wrap('<a href="http://www.baidu.com"></a>') // $('li').wrap(function(){ // // console.log($(this).text()) // var url = 'https://www.baidu.com/s?wd=' + $(this).text() // return '<a href="' + url + '"></a>' // }) // wrapAll在指定的html内容或元素中放置所有的被选元素 // $('li').wrapAll('<div></div>') // $('li').wrapAll('<strong></strong>') // $('li:nth-child(1)') // .wrapAll('<ul></ul>') // .first() // .css('color','red') // .end() // .last() // .css('color','blue') // .end() // .wrapInner(function(){ // var url = 'https://www.baidu.com/s?wd=' + $(this).text() // return '<a href="' + url + '"></a>' // }) // unwrap方法删除被选元素的父元素 // $('li:first').unwrap() // jQuery提供的替换功能 // $('li').replaceWith('<li>123</li>') // $('<li>123</li>').replaceAll('li:odd') // jQuery提供的清空标签和删除标签自身的功能 // $('html').empty() // $('html').remove() // detach()方法移除被选元素 包裹所有文本和子节点 // var hr = $('hr').detach() // setTimeout(function(){ // $('ul').after(hr) // },1000*10) // $('hr').click(function () { // console.log('ffffffff') // alert('哎呦') // }) // $('ul').after($('hr')).clone(true,true) // $("b").clone().prependTo("p");
CSS .red-text{ color:red; } .bold-text{ font-weight: bold; font-size: 2rem; } HTML <ul></ul> <ul> <li>第1项</li> <li>第2项</li> <li class="bold-text">第3项</li> <li>第4项</li> <li>CSS</li> <li>第6项</li> <li>第7项</li> </ul> <iframe></iframe> <script src="jquery.js"></script> <script src="index.js"></script> JavaScript // map是把每个元素通过函数传递到当前匹配集合中 生成包含返回值的新jQuery对象 // var ts = $('li').map(function(){ // return $(this).text() // // this表示当前索引位置的标签元素 // }) // console.dir(ts) // 将jQuery对象转换成类似字符串数组 // map(第一个参数当前元素的索引 第二个参数为当前某个元素) // var ts = $('li').map( // (i,ele)=>{return $(ele).text()} // (i,ele)=>$(ele).text() // 如果=>右侧只有一个return语句 可以省略return // 如果=>左侧只有一个参数可以省略括号 // (ele) => {} // ele=>{} // 如果=>左侧没有参数 则必须写()=>{} // 使用箭头函数时要注意this的指向 // 如果没有明确的function作用域包围this // this将指向全局作用域window // ) // console.log(ts) // 将类似数组转换为数组的方法 // join把数组中的所有元素放入一个字符串 // alert(Array.from(ts).join(', ')) // Array.from可以把类似数组的对象装换为数组 // console.log(Array.prototype.slice.call(ts)) // slice()方法会浅复制数组的一部分到一个新的数组 并返回这个数组 // Array.prototype.slice.call(arguments)能将具有length属性的对象转换成数组 // is判断jQuery对象中的标签元素是否符合某个条件 // alert($('li:even').is('.red-text')) // 判断内容中是否包含指定字符串 // function hasCSS(i,ele){ // return $(ele).text().indexOf('CSS') > -1 // } // alert($('li:eq(4)').is(hasCSS)) // toArray()把jQuery集合中所有DOM元素恢复成一个数组。 // console.log($('li').toArray().reverse().map(ele=>ele.innerText).join(', ')) // ************************************************************************** // 将ul全部改掉 // $('ul').text('1234567') // 改变列表项 // $('ul').html('<li>HTML<li>CSS<li>JS<li>NodeJs') // 使用原生代码创建节点 // createTextNode var comment = document.createTextNode('通过代码创建的文本') document.body.appendChild(comment) // HTML注释节点 // var comment = document.createComment('通过代码创建注释') // document.body.appendChild(comment) // 用代码创建出来的内容通过查看页面源代码看不到 只能使用查看器查看 查看器是实时的 // 创建很多节点时 使用DocumentFragment文档片段缓冲一下 可以减少对页面的冲击 // 节点创建好之后再一次性添加到页面上 // var ul = document.querySelector('ul') // var fragment = document.createDocumentFragment() // for(var i = 0;i<10000;i++){ // var li = document.createElement('li') // // '新建第' + i + '项' = `新建第${i}项` // li.innerHTML = `新建第${i}项` // fragment.appendChild(li) // } // ul.appendChild(fragment) // console.log($('<li>HTML<li>CSS<li>JS<li>NodeJs')) // 创建标签对象并添加到页面上 // $('<li>HTML<li>CSS<li>JS<li>NodeJs</li>').appendTo('ul') var iframe = document.querySelector('iframe') var idoc =iframe.contentWindow.document // contentWindow是得到iframe的内部window // iframe.contentWindow.document得到iframe内部的document // var div = document.createElement('div') // div.innerHTML = '<h1>标题标题</h1>' // idoc.body.appendChild(div) // $('<h1>标题标题</h1><p>段落段落</p>').appendTo(idoc.body) // 创建标签元素的同时添加监听事件 // 标签中不能写内容 $('<li></li>',{ 'class':'bold-text red-text', // 'onclick':'alert("点击了")' on:{ click:function(){ alert('点击了') } } }).text('这个条目好').appendTo('ul')
公告
最新评论
保标招标
博客很棒 欢迎博主回访我
评：深度系统更新（2020.11.13）Caid Blog
可否申请与贵站为友链， 网站名称：Caid Blog 网站地址：https://www.caidhome.cn 等贵站同意后第一时间添加贵站链接。
评：留言崔先森
邮箱复制回复连接，打开404呢！ 另外昨晚升级到2.9发图问题依旧就还换成2.6发现字体不对，自己研究了一会发现原来一直用的2.7有重新本地安装的，唉，默默的用吧顺带解决了窗口黑边框的问题，之前看的处理，还是tg好用实话虽然没啥好友但是放个视频资料啥的全当网盘里比百度网盘强多了 https://cuizhe.me/202007/972.cz
评：deepin更新最新版微信,如不能发图片回退方法崔先森
哈哈，搜索这个问题居然看到你博客了。现在最新版的还是无法解决这个问题吗？我在2.6的版本徘徊好久了。。。。
评：deepin更新最新版微信,如不能发图片回退方法Holyrisk
还有这个操作？
评：推广网站轩陌
主题更新了一下，你的评论问题应该也解决了，有需要可以看下
评：留言崔先森
还是想试试UOS，因为看广告发现哪个语音助手可以完几分钟。。。。。
评：deepin v20 Beta 安装uos浏览器挖站否
网站速度很快
评：2019款凌派舒适版加装免游丝版多功能方向盘阿凯
能不能出个视频教程啊，新手上路不太懂。
评：滴滴云安装宝塔Linux面板教程崔先森
没啥感觉~
评：360安全浏览器 V10.4.1001.0