<!-- 返回顶部 --> <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')
公告
最新评论
崔先森
还是想试试UOS，因为看广告发现哪个语音助手可以完几分钟。。。。。
评：deepin v20 Beta 安装uos浏览器挖站否
网站速度很快
评：2019款凌派舒适版加装免游丝版多功能方向盘阿凯
能不能出个视频教程啊，新手上路不太懂。
评：滴滴云安装宝塔Linux面板教程崔先森
没啥感觉~
评：360安全浏览器v10 更新10.2.1002.0-1版本清靈語
[img] /wp-content/uploads/comments/1643/20200127203212417127.png[/img] https://cs.chromium.org/chromium/src/net/http/transport_security_state_static.json?g=0&maxsize=20303600&q=xn--nf1a578axkh.xn--fiqs8s 这样就能找到了
评：网站启用HSTS并加入HSTS Preload List崔先森
新年快乐
评：留言轩陌
关于评论列表系统版本和浏览器不能正常显示已更新，拉代码更新即可
评：留言北海の猫
博主您好！技术猫博客最近搬家了，前来通知小主更新一下域名及名称（顺便再来踢个门）
名称：Kitten's Blog
地址：http://blog.skillcat.cn
简介：设计成就梦想，细节成就品质。
图标：http://cn.gravatar.com/avatar/59cb46c14fe1df1292ca09a761b7cbe3
评：留言崔先森
效果真的一般般~
评：Linux QQ全新回归崔先森
deepin.用得挺爽?
评：在荣耀笔记本（Linux版）中拥有深度应用商店，几步就搞定!