好比类库,工具类,封装了大量js代码。js的bug,不足,兼容性好。
jQuery是一个快速,小巧,功能丰富的JavaScript库。
它通过易于使用的API在大量浏览器中运行,
使得HTML文档遍历和操作,事件处理,动画和Ajax变得更加简单。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。
操作: 获取节点元素对象,属性操作,样式操作,类名,节点的创建,删除,添加,替换
jquery核心:write less,do more
搜索bootstrap,官网比较慢http://www.sychzs.cn/
使用cdn外页,百度搜索bootcdn的中文网
比如我们常常写的导航,搜索框,轮廓图,侧边栏等等都被叫做组件,封装在框架中.里面既有html结构,又有css样式。
这里面有它所有的类名:
进入下面的网页:
起步:
基本模板:
https://www.sychzs.cn/getting-started/#template
https://www.sychzs.cn/components/
这页有如下组件:
[root@xiaoma ~]# egrep "
可用的变体
默认样式的实例
自定义内容
实例
可关闭的警告框
警告框中的链接
基本实例
带有提示标签的进度条
根据情境变化效果
条纹效果
动画效果
堆叠效果
默认样式
对齐
媒体对象列表
基本实例
徽章
链接
按钮
被禁用的条目
情境类
定制内容
基本实例
带标题的面版
带脚注的面版
情境效果
带表格的面版
带列表组的面版
默认效果
可选类/样式
将之前的模板里的 世界你好 替换掉:
效果:
效果:
然后对源码进行修改,变成自己想要的样子。
自己创建一个container,已经生成这么宽的大小了。
样式中它已经给设置好了:
想让他百分之百:类名container-fluid
小马过河
使用bt的优缺点。
bt和vue不利于seo优化,适合自己内部用,开发速度快。
原生的利于seo.
下面这种网页一般是bt搭建的。
jquery.js开发环境用的js jquery.min.js是生成环境用的模块
生产环境里面变成了一行。简写了代码占的空间,开发环境很多行展开,方便写代码
复制库链接,访问复制文件内容,粘贴到新建的js目录下的jquery.js文件中。
由下可看到压缩成一行后,空间节省了很多。优化也可以给图片优化。
源码:自执行函数:
传进实参,形参global, factory。
global指的是window。
非严格模式下函数中的this:
function f() { console.log(this); } f() -------------------结果: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
严格模式下函数中的this:
function f() { 'use strict'; console.log(this ,typeof this); } f(); ------------结果: undefined "undefined"
函数中的this指向window对象,可以重写window对象上的某些属性。防止意外修改window属性,使用严格模式,这样this未定义,给未定义赋值变量就报错了。框架一般用的是严格模式
如下图写函数,返回一个对象。jquery作为一个全局的变量。后面都是给这个对象封装大量的方法
看下面:如果是全局(不是不是全局),即将jquery引入全局作用域下。就会将jquery赋值给window对象下的$,又赋值给window.jQuery 。
这样在外面使用就可以用$代指jquery对象。
点击这个对象跳转到source,找到函数所在的地方:
看这个$对象的方法:
"en"> "UTF-8">"box" class="box" >小马过河
跟原生js获取的不一样,给jquery对象封装了大量方法。获取的标签组成伪数组,最后是个length。可切片获取。 里面封装的方法不是数组的方法。
"box" class="box" >小马过河
切片获取到的第一个标签对象。
$('.box') #jquery对象
$('#box')[0] #jquery对象转换为js对象
jquery只是封装了一部分js的api,有些没有封装的时候就要转换为js对象,用js来写jquery没有封装的模块
"box" class="box" >小马过河
$(box) jquery对象
box js对象
"box" class="box" >小马过河
"en"> "UTF-8">"box" class="box" >魔降风云变1
魔降风云变2
'#box p' '#box>p' 包括css交集选择器,组合选择器都能选中。哪怕只选中一个,也是伪数组形式显示的。如果想要取值的话,[0]第一个,[1]第二个
"en"> "UTF-8">"box" class="box" >class="active">魔降风云变1
class="active">魔降风云变2
text也可以不用写引号。包括伪类,伪元素,就是之前css怎么选的这里怎么写就行。
console.log($('input[type=submit]'));
改了下类型。如果打印的里面没有值,说明没有获取出对象:
4.5、绑定click事件
"en"> "UTF-8">"box" class="box" >魔降风云变1
魔降风云变2
"text">
我在浏览器上点击两个标签里的文本,点击一次打印统计数加一。如果是js,是需要对着两个标签做for循环的,而jquery绑定事件省去了循环。jquery已经给我们写好了。
jq只需选中元素,绑定事件名,来个回调函数,在里面做相应的事情。
魔降风云变1
魔降风云变2
点击两下,查看打印的this是js对象。jquery内部通过call和apply方法给我们改变了指向。把this指向了当前节点对象,且是js对象
这样的话,用this可以操作节点对象的属性等
如果没有打印,可能是你忘记打印了。
那么使用js转换为jq的方法,使用jq操作对象:$(this) //事件函数中的这个this是每个js节点对象
"box" class="box" >class="active">魔降风云变1
class="active">魔降风云变2
"text">
点击变红。css样式添加和修改: $(this).css('属性','值')
"box" class="box" >class="active">魔降风云变1
class="active">魔降风云变2
"text">
同属性的会覆盖,不同属性的多次设置互不影响。带-的属性font-size 也可以用驼峰体 去- 后一变大fontSize
1 $('#box .active').click(function () { 2 $(this).css({ 3 "color": "red", 4 'fontSize':'20px' 5 }); 6 })
转化为jquery的每个元素对象.css(),小中花,花中多个逗号隔。冒号拼值
总结:通过调用.css()方法,(内部实行函数重载)
如果传入一个参数,看一下这个参数如果是一个字符串表示获取值,如果是对象,表示设置多少属性值,如果是两个参数,设置单个属性值
图片来源:https://www.sychzs.cn/majj/p/9112112.html
代码如下: