设计店面装修,企业网站优化设计的含义,金戈西地那非片能延时多久,乐清招聘网文章目录 一、jQuery介绍二、Jquery优势三、jQuery版本四、jQuery对象jQuery的引用js代码与jQuery代码对比标签对象与jQuery对象 五、jQuery查找标签1.基本选择器2.组合选择器3.层次选择器4.属性选择器5.基本筛选器6.表单筛选器 六、筛选器方法七、操作标签1.class操作2.文本操… 文章目录 一、jQuery介绍二、Jquery优势三、jQuery版本四、jQuery对象jQuery的引用js代码与jQuery代码对比标签对象与jQuery对象 五、jQuery查找标签1.基本选择器2.组合选择器3.层次选择器4.属性选择器5.基本筛选器6.表单筛选器 六、筛选器方法七、操作标签1.class操作2.文本操作3.创建标签4.属性操作5.位置操作6.文档处理 八、jQuery事件jQuery绑定事件克隆事件阻止后续事件阻止事件冒泡事件委托 九、Bootstrap框架 一、jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库jQuery是用户能够更方便的处理HTML Document、Events、实现动画效果并且方便地进行Ajax交互能够极大的简化JavaScript编程。它的宗旨就是“Write less,do more” 二、Jquery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb不会影响页面加载速度。(加载速度快) 丰富的DOM选择器。jQuery的选择器用起来很方便比如要找到某个DOM对象的相邻元素JS可能要写好几行代码而jQuery一行代码就搞定了再比如要将一个表格的隔行变色jQuery也是一行代码搞定。(选择器更多) 链式表达式。jQuery的链式操作可以把多个操作写在一行代码搞定更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了 Ajax操作后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件例如树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应的插件并且用jQuery插件做出来的效果很炫并且可以更具自己需要去改写和封装插件简单实用。 三、jQuery版本
1.x兼容IE678使用最为广泛的官方只做BUG维护功能不再新增。因此一般项目来说使用1.x版本就可以了最终版本1.12.4(2016年5月20日)2.x不兼容IE678很少有人使用官方只做BUG维护功能不再新增如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4(2016年5月20日)3.x不兼容IE678只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版本。目前该版本是官方主要更新维护的版本。 维护IE678是一件让人头疼的事情一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少PC端用户已经逐步被移动端用户所取代如果没有特殊要求的花一般会选择放弃对IE678的支持 四、jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象就是jQuery独有的。 如果一个对象是jQuery对象那么它就可以使用jQuery里面的方法 jQuery导入之后需要使用关键字才能够使用默认的关键字就是jQuery但是不好输入可以使用$符号替换jQuery封装了js代码让编写更简单但是有时候js代码更快(原因要下加载jQuery在加载js代码)ex:$(#dl1).html(); //获取id值为dl1的元素的html代码其中html()是jQuery里面的方法上面一句话相当于document.getElementById(dl1).innerHTML;虽然jQuery对象是包装DOM对象产生的但是jQuery对象无法使用DOM对象的任何方法同理DOM对象也不能使用jQuery里的方法一个约定我们在申明一个jQuery对象变量的时候都在变量名前面使用$符号jQuery的引用 由于jQuery是基于JS而开发出来的则jQuery就是一堆JS代码所以我们在使用jQuery前需要先进行引入这里介绍两种jQuery引入方式。 第一种方式将jQuery保存到JS文件内引入(这种没有网络也可以使用) 第一步官方页面下载地址https://jquery.com/download/ 第二步我们将点击箭头指向的版本的jQuery(压缩版jQuery可能会看不懂但是相对会节省一些空间虽然对于电脑来说大差不差)(未压缩版能让你看到排序完整的jQuery源码)随便个人选择那个版本点击进去后就能看到一堆代码直接在页面CtrlS另存为就行了。(也可以自己CtrlA复制代码自己在编辑器中创建相应的js文件粘贴进去) 此时我们就已经将jQuery保存到了一个JS文件内了 第三步我们在HTML内通过script标签进行jQuery引入 script srcjQueryjs文件地址/script第二种引入方式通过网址引入(这种是必须要有网络才能使用)
我们可以通过Bootcdncdn是一个内容分发网络主要作用就是可以从距离我们本地最近的一个服务器获取内容。网址https://www.bootcdn.cn/ 然后选择版本号和版本然后点击复制即可。 复制标签后我们就可以在HTML内的head的标签内粘贴了 到此我们的jQuery引入就已经完成了我选择的是网址引入的当然最好是把jQuery的js文件的留作备份以防没网时需要用到。 js代码与jQuery代码对比 let pel document.getElementsByTagName(p)[0]; //标签名pel.style.color lightblue;pel.nextElementSibling.style.colordarkred;$(p).first().css(color,yellow).next().css(color,blue);标签对象与jQuery对象 产生对象var $variable JQuery对象var variable DOM对象$variable[0] // jQuery对象转换成DOM对象1.不同的对象能够调用的方法是不同的在编写代码的时候一定要看清楚写的时什么对象$(#id).html(); //jQuery对象可以使用JQuery的方法$(#id)[0].innerHTML; //DOM对象使用DOM的方法2.两者可以互相转换标签对象转jQuery对象$(标签对象);jQuery对象转标签对象jQuery对象[0];五、jQuery查找标签
1.基本选择器 $(#id值); // id选择器$(.class值); // class选择器$(标签名); // 标签选择器2.组合选择器 $(span.c1); // 查找span元素并且class类为c1的元素$(div#di); // 查找div元素并且id值为di的元素$(div,span,p); //查找div、span、p标签$(span,#dl,.box); //查找span标签、id值为dl的标签和类为box的所有标签$(*); //查找所有元素选择器3.层次选择器 $(div span); // 查找div里面所有span后代(子子孙孙)$(div span); // 查找div里面的span标签(儿子)$(div span); // 查找紧挨着div同层级后面的span标签(相邻)$(div ~ span); // 查找div同层级后面的所有span标签(兄弟)jQuery选择器查找标签之后的结果与js有何区别结果集都是数组但是功能有区别1.如果使用索引取值 那么都是标签对象标签对象是无法调用jQuery提供的方法的 # 详细查看图一2.标签对象如果想转换成jQuery对象需要使用 $()转换成jQuery对象的目的是为了使用jQuery提供的更多方法 # 详细查看图二4.属性选择器 $([namegender]); //找到name值为gender的标签$(input[namegender]); //找到name属性值为gender的input标签$(input[name!gender]); //找到name属性值不为gender的input标签5.基本筛选器 :first // 第一个:last // 最后一个:eq(index) // 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素从0开始计数:odd // 匹配所有索引值为奇数的元素从0开始计数:gt(index) // 匹配所有大于给定索引值的元素:lt(index) // 匹配所有小于给定索引值的元素:not(元素选择器) // 移除所有满足not条件的标签:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)$(li:first); 优化 $(li).first()6.表单筛选器 // 举例查找input标签input typetextinput typepasswordinput typecheckbox$(input[typecheckbox]); //取到checkbox类型的input标签$(input[type!text]); //取到类型不是text的input标签表单筛选器可以看成是属性选择器优化而来:text //获取文本类型:password // 获取密码类型:file // 获取文件类型:radio // 获取单选框类型:checkbox // 获取复选框类型:submit // 获取提交按钮类型:reset // 获取重置按钮类型:button // 获取普通按钮类型:enabled // 获取可以使用的类型:disabled // 获取被禁用的类型:checked // 获取单选框默认被选中的类型:selected // 获取下拉框默认被选中的类型六、筛选器方法 查找下一个元素$(#id).next()$(#id).nextAll()$(#id).nextUntil(#i2)查找上一个元素$(#id).prev()$(#id).prevAll()$(#id).prevUntil(#i2)查找父元素$(#id).parent()$(#id).parents() // 查找当前元素的所有的父辈元素$(#id).parentsUntil() // 查找当前元素的所有的父辈元素直到遇到匹配的那个元素为止。查找儿子与兄弟元素$(#id).children(); // 儿子们$(#id).siblings(); // 兄弟们链式操作的底层原理对象调用方法之后还会返回一个对象 从而实现链式操作的效果如果面向对象里面返回的对象也想继续再通过句点符的方式使用函数内添加一个 return self(具体看图2).first() // 获取匹配的第一个元素.last() // 获取匹配的最后一个元素.not() // 从匹配元素的集合中删除与指定表达式匹配的元素.has() // 保留包含特定后代的元素去掉那些不含有指定后代的元素。.eq() // 索引值等于指定值的元素 七、操作标签
1.class操作 jQuery操作 js操作addClass() classList.add() //添加指定的类名removeClass() classList.remove() //移除指定的类名hasClass() classList.contains() //判断当前类是否存在toggleClass() classList.toggle() //判断当前类是否存在存在则删除不存在则添加.css(样式名,样式值) style.样式名样式值2.文本操作 jQuery操作 js操作text() innerText() //获取text里所有的内容html() innerHTML() //获取html里所有的内容val() value() //取得匹配的内容值[0].files files[0] //取得匹配的文件值eg:input typetext idd1input typefile idd2$(#d1).val() //获取input框内值$(#d1).val(520快乐); //设置input框内值$(#d2).val() //获取文件对象$(#d2)[0].files$(#d2)[0].files[0] //正确拿到文件数据3.创建标签 jQuery操作 js操作$(a) document.createElement(a) 4.属性操作 jQuery操作 js操作atter() setAttribute() getAttribute() //获取匹配的属性值attr针对动态变化的属性获取会失真,比如性别选择已经默认选择男生但是我们在浏览器终端里面操作prop,
点击女生标签会选中显示是true,本质应该是false
prop(checked) prop(selected)代码展示1
bodyinput typetextinput typepasswordinput typeradio男input typeradio checked女input typeradio其他select name idoption value111/optionoption value selected222/optionoption value333/option/selectinput typesubmit value提交input typebutton value按钮
/body5.位置操作 offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置position() // 获取匹配元素相对父元素的偏移scrollTop() // 获取匹配元素相对滚动条顶部的偏移scrollLeft() // 获取匹配元素相对滚动条左侧的偏移eg$(window).scrolltop()$(p).position();$(p).offset();6.文档处理 添加到指定元素内部后面追加内容$(A).append(B); //把B追加到A $(A).appendTo(B); //把A追加到B添加到指定元素内部的前面放置到前标签前面$(A).prepend(B); // 把B放置到A$(A).prependTo(B); //把A放置到B添加到指定元素外部的前面$(A).after(B); //把B放到A的后面$(A).insertBefore(B); //把A放到B的前面移除和清空元素$(标签名).remove() //从DOM中删除所有匹配的元素$(标签名 子标签名)empty() //删除匹配的元素集合中所有的子节点prop() //获取属性值可以动态变换(checked)eg:1.创建p标签let $pEle $(p)2.p标签创建文本$pEle.text(你好啊)3.p标签设置属性id名为d1值$pEle.attr(id,d1)4.内部尾部追加$(#d1).append($pEle) 将变量添加到标签内部$pEle.appendTo($(#d1))八、jQuery事件
jQuery绑定事件 Js绑定事件绑定方式1: 提现写好函数 标签内部指定点击的时候运行input typebutton value点我 onclickfunc1()function func1(){alert(我说点点我就点我啊)} 绑定方式2: 先查询到标签 然后绑定使用 可以批量绑定button idd1点一点/buttonlet butEle document.getElementById(d1)butEle.onclick function(){alert(你个傻儿 你又点)}对于JS绑定事件不明白 可以查看前篇文章JQ绑定事件绑定方式1jQuery对象.事件名(function(){事件代码})$btnEle.click(function(){alter(123)})绑定方式2jQuery对象.on(事件名,function(){事件代码})$btnEle.on(click,function(){alter(123)}) 有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2 克隆事件
clone(true) 默认不克隆事件 加true就可以button idd1 克隆成功/button
script// 克隆$(#d1).on(click,function (){// this指代是当前被操作的标签对象 $(#d1)console.log(this) //点击按钮克隆成功输出台会持续克隆$(this).clone().insertAfter($(body))//克隆按钮克隆成功在浏览器展示只克隆html,css 不克隆事件$(this).clone(true).insertAfter($(body)) //括号内增加true 实现克隆事件})
/script**事件相关补充**
阻止后续事件 阻止后续事件可以理解成一个标签完成了百分之五十进度后面的百分之五十被阻止运行 这就是阻止后续事件能够触发form表单提交数据的动作标签有两个 input typesubmit button/button让标签自带的属性不执行有两种方法1. return false2. e.preventDefault()!DOCTYPE htmlhtmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js/script/headbodyform actionp再加把劲: input typetext nameinfo placeholder加油啦//pinput typesubmit value提交/buttonbut提交/button/form 我们输入的内容通过点击按钮可以发送出去刷新页面给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的我们也可以让标签之前的事件不执行 看方式1、2script $(:submit).click(function (e){alert(一定要细心 千万不要慌!!!)return false 方式1 e.preventDefault() 方式2})/script/body/html阻止事件冒泡 冒泡事件可以理解成点击一个按钮之后被嵌套的其他按钮也跟着被按了 一下全部全部触发涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行!DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js/script/headbodydivdivpdivpspandivpspan/span/p/divscript$(div).click(function (e) {alert(div)})$(p).click(function (e) {alert(p)e.stopPropagation()})$(span).click(function (e) {alert(span)// return false})/script/body/html事件委托 我们在使用静态创建的标签的时候 一个JQ对象就可以使一样的标签拥有同样的效果但是我们使用动态方法创建一个标签 默认情况JQ是不会对动态创建标签生效的 如果想生效需要事件委托九、Bootstrap框架 本地服务下载网站 https://www.bootcss.com/ 在线CDN服务网站 https://www.bootcdn.cn/ Bootstrap在线CSS https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.cssBootstrap在线JS https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.esm.js提前写好了所有的标签样式 直接拷贝使用即可使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery 图标组件 http://www.fontawesome.com.cn/
