jQuery

jQuery回顶部

<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; })

2018-08-08 16:46:38 14 1 0

阅读详情

通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接

不多说了，看代码 <!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>  

2017-11-27 20:31:24 10 2 0

阅读详情

在vue-cli中通过webpack全局引入jQuery

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  

2017-10-21 19:32:45 17 1 0

阅读详情

jQuery工具

<!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 ) );

2017-08-17 21:56:21 12 0 0

阅读详情

jQuery动画参数

<!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 })

2017-08-17 21:53:39 14 0 0

阅读详情

jQuery布局、jQuery效果

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); });

2017-08-16 19:57:34 14 0 0

阅读详情

jQuery操作标签元素

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");

2017-08-16 19:46:35 11 0 0

阅读详情

jQuery对象转换成其它对象

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')

2017-08-16 19:30:23 13 0 0

阅读详情