jq | 易学教程

锋利的jq第二天

阅读更多关于锋利的jq第二天

1.# * []等特殊符号转译用双斜杠\\ 2.选择器中的空格问题　　$(".test :hidden") 和$(".test:hidden") 3.交替事件::visible/toggle(function(){},function(){})/toggleClass()/slideToggle() 5.append/insert/after/berfore等原节点剪切 6.删除dom 　　remove():删除的元素在页面消失,但后面仍可以调用;删除子代元素,也删除了自身　　empty():清空,子代删除,自身保留 7.clone(true):true的意义在于绑定的方法也被克隆了 8.替换dom 　　replaceWith()/replaceAll():被替换的元素所绑定的方法也被替换,需要重新绑定 9.wrap()/wrapAll() 　　wrap():一个个包裹匹配的元素 wrapAll():一个标签包裹所有匹配的元素　　wrapInner() 10.attr():用attr操作class是替换而非追加;想要追加class用addClass 11.hasClass()/is() 12.input的placehoder存在兼容问题,可以通过val()方法的focus和blur以及判断是否输入来代替(初始值defaultValue) 13

jquery

阅读更多关于 jquery

jQuery对象和javascript对象间的转换 // js对象转换为jq对象 var tdiv = document.getElementById("tDiv"); $(tdiv).html("nihao"); // jq对象转换为 $("#tDiv")[0].innerHTML="java"; $("#tDiv")get(0).innerHTML="java"; 使用jQuery操作元素的属性使用css方法 # 使用:jq对象.css(属性参数); * $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开 * $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式使用CSS类的方法 # 添加属性:addClass()方法 * 用法:jq对象.addClass(class类) * $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd # 删除属性:removeClass()方法 * 用法:jq对象.removeClass(class类) * $("tbody tr:odd").removeClass("odd"); //

前端 JQ事件操作

阅读更多关于前端 JQ事件操作

jq API http://jquery.cuishifeng.cn/ jq初始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq初始</title> </head> <body> <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1> <h2>jq内部语法采用的就是原生js</h2> <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2> <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2> </body>    <script src="js/jquery-3.4.1.js"></script> <script> // jQuery对象 console.log(jQuery); console.log($); console.log(Owen); console.log($('h1')); $('h1').click

前端组件化-高质高效协作利器

阅读更多关于前端组件化-高质高效协作利器

小编寄语在这个“不出门就是给国家做贡献”的日子里，技术委员会提前祝大家元宵节快乐，祝我们的生活像汤圆一样甜蜜圆满。也请伙伴们少出门，勤洗手，戴口罩，为自己和家人的健康保驾护航，同心协力，共克时艰！我们相信阳光会驱散阴霾，一切都会好起来的！小编今天分享一篇由家长帮倪思远老师带来的技术好文《前端组件化-高质高效协作利器》，本文主要介绍了作者对于组件化的理解以及组内是如何实现组件化的，希望能够对大家有所启发和帮助~ 前言项目开发过程中，随着业务的不断迭代，很容易暴露以下问题： 1、代码体积会不断增加，代码的冗余会越来越大； 2、业务逻辑复杂度会不断增加，逻辑的可拓展性、可维护性越来越脆弱；问题的主要原因在于： 1、功能代码的复用方式是简单粗暴拷贝和粘贴； 2、多人协作导致代码耦合度高，后期维护拓展方式不合理；针对以上问题，在前端项目工程化的基础上，引入前端组件化，从功能模块的复用、通信，及多人协作的层面进行解耦。预期效果： 1.通过组件化的编码，实现功能的封装和复用，减少冗余 2.通过组件化的协作，实现功能和业务的解耦，高效协作一.什么是前端组件化？前端组件化以前经历的过程：面向过程–面向对象–面向模块。前端业务复杂度的不断提升，传统的以HTML+JQ为主的面向过程的开发方式已经很难满足大型项目的迭代和维护。面向对象方式(继承、封装、多态、实例化构造)、借助模块化加载器

jq动画和停止动画

阅读更多关于 jq动画和停止动画

使用jq 实现动画循环效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { height: 200px; background-color: green; font-size: 60px; color: white; } .item { width: 200px; height: 200px; position: fixed; top: 0; left: 0; background-color: red; } </style> </head> <body> <div class="item"></div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> function run(){ $('.item').animate({ width: '50px', height :

JQ事件动画

阅读更多关于 JQ事件动画

最近在学习JQ动画，收集一些JQ动画的一些基础知识跟大家分享下！加载DOM执行 $(document).ready(function(){}) 简写： $(function(){}) 4.1.2 事件绑定在文档加载完成后，为元素绑定事件 bind(type[,data],fn) type: 事件类型：包括blur,focus,click等第2个可选参数作为event.data属性传递给事件对象的额外数据对象 eg function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) 第3个参数为绑定的处理函数 4.1.3 合成事件 hover(enter,leave) 用于模拟光标悬停的事件当光标移动到元素上，触发第一个函数，移出触发第二个函数 $(function(){ $("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()}); }); hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave") 2 toggle()

JQ的基础

阅读更多关于 JQ的基础

JQ的触发在js中，如果要在代码执行的时候运行方法，则需要在里面设置一个οnlοad=check()触发事件，一旦该代码执行的时候则会运行js中的check()方法；但是在jq中不需要设置该触发事件，直接是$(function(){});即可下面是jq的代码 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < script src = "../js/jquery-1.11.3.min.js" > < / script > < script > $ ( function ( ) { alert ( "aaaa" ) ; } ) ; $ ( function ( ) { alert ( "bbb" ) ; } ) ; < / script > < / head > < body > < / body > < / html > 下面是js的代码 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < script > function check ( ) { alert ( "aaa" ) ; } < / script > < / head

优秀js开源框架-jQuery使用手册(1)

阅读更多关于优秀js开源框架-jQuery使用手册(1)

对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！下载地址：http://jquery.com 下载完成后先加载到文档中，然后我们来看个简单的例子！ <script type="text/javascript" src="scripts/jquery-1.2.3.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("a").click(function() { alert("Hello world!"); }); }); </script> 上边的效果是点击文档中所有a标签时将弹出对话框，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"><

jQuery使用手册之核心部分(2)

阅读更多关于 jQuery使用手册之核心部分(2)

$(expr) 说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础参数：expr：字符串，一个查询表达式或一段html字符串例子：未执行jQuery前： <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()" >jQuery</a> jQuery代码及功能： function jq(){ alert($("div > p").html()); } 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 function jq(){ $("<div><p>Hello</p></div>").appendTo("body"); } 运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>” $(elem) 说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象参数： elem：通过jQuery对象压缩的DOM元素例子：未执行jQuery前： <p>one</p> <div> <p>two</p> </div><p>three</p> <a href="#" id="test" onClick

jQuery 使用手册(一)

阅读更多关于 jQuery 使用手册(一)

一：核心部分 $(expr) 说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础参数：expr：字符串，一个查询表达式或一段html字符串例子：未执行jQuery前： <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()" >jQuery</a> jQuery代码及功能： function jq(){ alert($("div > p").html()); } 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 function jq(){ $("<div><p>Hello</p></div>").appendTo("body"); } 运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>” $(elem) 说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象参数： elem：通过jQuery对象压缩的DOM元素例子：未执行jQuery前： <p>one</p> <div> <p>two</p> </div><p>three</p> <a href="#" id="test"

订阅 jq