前端框架 学习

Jquery框架 Js框架/库

Jquery是一个js的库,提供了很多常用且方便的功能,这些功能不是简单地堆放在一起,而是直观的逻辑有机联系在一起的.这其中最关键的就是面向对象的思维.

jquery有自己的对象,这些对象有共性也有特性,就像java中所有的类继承自Object类一样,jquery就是一个这样简洁的框架.

jquery从功能层面提供了对于js的几乎全方面的简化方法,例如获取dom对象,操作dom对象等等

Jquery的核心与特点

Jquery提供的方法全部封装在一个对象中,这个对象被叫做Jquery对象,只能通过这个对象调用Jquery提供的方法.

想要获取这个Jquery对象,为我们可以直接用$表示jqeury对象,也就是说$符号就是jquery对象的引用

Jquery包装集对象和DOM对象

DOM对象我们都知道,document Object model,这个对象代表的是我们整个页面元素,但是这里的dom对象 指的是通过js代码直接获得的文档元素对象.

jquery想让获取到的对象具有更方便的方法和更强大的功能,所以jquery会将通过jquery获取的dom对象封装成更强大的jquery包装集对象.

虽然包装集对象具有更强大的功能,但是除了jquery别的js都不知道怎么使用这个对象,所以别的js代码想要使用这个包装机对象,需要先解包成dom对象才行.

Dom对象转包装集对象

let jquery对象 = $(dom对象)

没错,直接通过$() 传入dom对象自动就会转成包装集对象,原理可能是检测了函数的参数类型,从而选择函数逻辑的

Jquery转dom对象

一共有两种方法

1. 通过取包装集对象的下标,获取内涵的dom对象

let dom = divJquery[0];
//这里是jquery包装集对象中只有一个dom直接取下标0即可,包装集如果表示多个元素可以通过.each(函数)来遍历每一个元素

Jquery选择器

获取文档中的对象,这个是js代码很常用的操作,jquery也为这个操作提供了极大的便利

根据css选择器定位

语法如下:

let element = $("css 选择器表达式");
//常用的有类,id,组合,结构,伪类,伪元素,伪结构,属性选择器...

原理可能就是检查传入参数类型是字符串,那么就执行选择操作,而不是之前的转换成包装集对象操作

表单选择器

表单是html的亲儿子标签也不为过,js也为其提供了最特殊的服务,在js中可以直接找到form表单通过dom.form的name属性的形式,就像是form表单的元素都注册到了js里面一样

到了jquery当然也很重视form表单,提供了表单伪类作为css选择器的扩展内容

伪类名	代码表示	例子
是输入元素	:input	$(“:input”) 筛选只要输入元素,包括input标签,select标签,textarea标签
是文本框输入元素	:text	$(“:text”) 筛选只要输入中type=text的元素
是密码框元素	:password
	:radio
	:checkbox
	:submit
	:image
	:reset
	:file
	:button

包装集操作对象dom节点

操作节点的属性

jquery的对于方法的重载用的很好,一个方法传入参数,还是不传入参数,以及传入什么样的参数都会用来判断函数的具体执行逻辑

对于节点的属性

- 修改
- 查询

两个需求,jquery都只使用一个函数来同时重载提供这两种功能

传入参数表示修改,不传入参数表示获取

jqeury提供了两个方法操作属性:

1. attr 实际上表示的是特质的意思,与特质对象密不可分,是owner的一部分

实际上的操作就是获取最为详实的设置信息

– 对于固有属性 能够获得

– 对于boolean类型的属性 设置了返回设置的枚举 没有设置返回undefined

– 对于自定义属性 能够获得

2. prop 表示的是所有物,权限比较小,只能查看是不是所有物,所以获取的信息笼统,不全

实际上的操作是先查找非固有属性,再去找固有属性,最重要的就是全面覆盖,不要错误

– 对于固有属性 能够获得

–对于boolean类型属性 统一返回true或者false 没有设置属性也返回false

– 对于自定义属性 无法获得

– 只能使用removeAttr移除属性,prop没法操作

prop 属性

自定义属性就是prop所有物,是标签的所有物,但不是固有属性attr

attr属性

固有属性,例如a标签定义的时候就固有特质href属性,这个属性不可没有,没有值也能获取到null对象

操作元素样式 类

实际上样式也是一种标签的属性

获取元素类 attr(“class”)

换新的类 attr(“class”, “新的class”)

添加一个类 addAttr(“class”, “新加入的类名”)

删除一个类 removeClass(具体的那个class,或者一些class)

添加行内样式 css(“具体样式名”,”值”) 或者 css({css map}) 实际上就是一个字典,map对象传入

操作元素的内容

三种方法针对不同种类的元素

1. html()
2. text()
3. val()

函数的设计原则也是多多重载型,查询与修改给予一体

html()

获取html内容,包括标签

html( “html 标签格式的文本 “)

识别标签,并且会渲染

text()

获取标签之间的文本部分

text(“ 任意本文”)

不会识别文本中的html的标签

val()

获取表单元素的value值

val(值)

为表达表单元素赋值

(意思是非表单元素val没用,因为这些元素都没有用value属性)

创建元素

直接使用核心函数可以创建一个jquery包装集,然后利用包装集对象中的方法去添加进入dom

核心函数检测到传入的字符串是一个html格式的文本,那么就会为其创建一个包装集对象

$("<p> this is a example.</p>");

添加元素

prepend(元素或者字符串) 添加到被选择元素的子元素队列最前

append(元素或者字符串) 添加到被选择元素的子元素队列最后面

prependTo无非就是添加对象和被添加对象换了位置

appendTo同理

如果是已有元素添加到另一个位置相当于切换了位置,如果是复制的话会导致id等属性出现冲突,所以是剪切

before(元素或者字符串) 在被选择元素的前边添加一个兄弟

after(元素或者字符串)在被选择的元素的后边添加一个兄弟

如果是已有元素添加到另一个位置相当于切换了位置,如果是复制的话会导致id等属性出现冲突,所以是剪切

删除元素,清空元素

remove()删除元素,所有自己标签也没有了

empty()清空内容,包括所有的子元素,子节点

遍历包装集对象

$(selector).each( function(index,element) )

这里的element是dom对象不是包装集对象,指的是包装集中的一个元素

index从0开始

一个隐藏对象 this 表示当前遍历的element

事件操作

ready加载事件

这个事件很常用

当dom文档被完全加载进入,触发ready预加载事件,类似于load事件

ready事件的处理函数可以同时有多个

写法:

1.

$( document ).ready( function(){

some code.

})

通过设置dom的ready事件处理函数

2.

简写方式,因为很常用,所以jquery提供了简写方式

$(function(){

})

原理就是jquery检测到传入参数是一个function类型的参数就会自动设置为ready处理函数

元素绑定事件

jquery提供的是bind方法

这个方法一共有三个参数,常用的有两个

语法:

$(selector).bind(eventype,[事件需要传递的参数map,] handler(eventObject))
//example
$(selector).bind('click',function{});
//绑定多个事件,绑定多个处理函数
bind("事件1,事件2,...",function{})
bind("事件",function{}).bind("事件",function{}).bind(...)..
bind.({"事件":function(){},
    "事件":function{},...
});

或者直接通过事件名同名函数传递事件处理函数

$(selector).click(function{}).事件名(function())

现在实现处理函数基本上不使用event变量了

都使用 this对象 表示触发事件的对象

ajax操作

语法:

//常用
$.ajax({
    url: ,
    type: ,
    data: ,
    success: function{},
       error:function{}
});
//完整语法
$.ajax({
      url: ,
    type: ,
    async:true,
    data: JSON对象,
    datatype:,
    content:请求头,
    success: function{},
       error:function{} 
});
//例子
$.ajax({
    type:"post",
    url:"index.jsp",
    async:true,
    data:{name:"some name"},
    dataType:"json",//收到数据之后会自动判断,并进行转换
    content:{},
    success:function(data){
        //收到的data变量就是dataType处理过的
        
    },
    error:function{}
})

简化方法

$.get({

})

相当于$.ajax默认了type=”get”

1. $.get(“url”) 发送异步请求,忽略返回值
2. $.get(“url”,function(data){success 方法的处理})
3. $.get(“url”,data,function(data){})

另一个是

$.post({

})

简化写法和$.get的完全一样

还有一个是

$.getJSON({

})

如果服务器返回的不是json字符串,那么直接就不会生成data对象传入success处理方法

JavaScript 脚本语言

TypeScript脚本语言