前端基础之jQuery

Posted 2020-10-10 马失望

jQuery入门

jQuery是什么？

jQuery是一个兼容多个浏览器的javascript库，极大地简化了JavaScript编程，宗旨是：‘Write less，do more。’

jQuery包含内容：html元素选取  html元素操作  CSS操作  html时间函数  JavaScript特效和动漫  html DOM遍历和修改  AJAX

下载链接：jQuery官网

jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，入一个对象是jQuery对象，那它就可以使用jQuery方法：例如$（‘#i1’）.html()。

    $(‘#i1‘).html()是：获取id值为i1的元素的HTML代码，这里html（）是jQuery里的方法

    相当于：document.getElementById(‘i1‘).innerHtml;

**在声明一个jQuery对象变量是在变量名前加上$；

1.var $variable=jQuery对象

2.varvariable=DOM对象

3.$variable[0]//jQuery对象转成DOM对象

jQuery和DOM对象的使用：

1.$(‘#i1‘).html();   //jQuery对象可以使用jQuery的方法

2.$(‘#i1‘)[0].innerHtml;   //DOM对象使用DOM的方法

 

jQuery基础语法

$(selector).action()

查找标签

选择器

id选择器：$(‘#id‘)

class选择器：$(‘.className‘)

标签选择器：$(‘tagName‘)

组合选择器：$(‘#id,.className,tagName‘)

层级选择器：$(‘#id a‘)   //所有后代a标签    $(‘#id>a‘)  //第一个儿子标签

基本选择器：1.：first  第一个      2.：eq(index)  索引等于index的那个标签      3.：last   最后一个

属性选择器：1.<input type=‘text‘>    2.<input type=‘password‘>   3.<input type=‘checkbox‘>    4.$(“input[type=‘checkbox‘]”)   渠道checkbox类型的input标签

筛选器

下一个元素：

1.$(‘#id‘),next()

2.$(‘#id‘).nextAll()

3.$(‘#id‘).nextUntil(‘#i2‘)

上一个元素：

1.$(‘#id‘).prev()

2.$(‘#id‘).prevAll()

3.$(‘#id‘).prevUntil(‘#i2‘)

父亲元素：

1.$(‘#id‘).parent()

2.$(‘#id‘).parentsAll()

3.$(‘#id‘).parentsUntil()

儿子和兄弟元素：

1.$(‘#id‘).children()    儿子们

2.$(‘#id‘).siblings()     兄弟们

查找元素：

1.$(‘id‘).find()

操作

数字属性

用于自定义属性

1.attr（）

2.removeAttr（）

用于checkbox和radio

1.prop（）

2.removeProp（）

CSS

CSS类

1.addClass() 添加指定的CSS类名

2.removeClass() 移除指定的CSS类名

3.toggleClass()  切换CSS类名，如果有就移除，如果没有就添加

CSS样式

css

1.css(‘color’,‘red‘) DOM操作：tag.style.color=‘red‘

位置

1.offset()   党对视窗扩的坐标

2.pasition()

3.scrollTop()

4.scrollLeft()

尺寸

1.height()

2.width()

3.innerHeight()

4.innerWidth()

文档

html代码

1.html()

文本值：

1.text（）

值：

1.val()  针对input标签

文档处理：

添加到指定元素内部的后面

1.$(A).append(B)  把B追加到A

2.$(A).appendTo(B) 把A追加到B

添加到指定元素内部的前面

1.$(A).prepend(B)  把B前置到A

2.$(B).prependTo(B) 把A前置到B

添加指定元素外部的后面

1.$(A).after(B) 把B放到A 的后面

添加到指定元素外部的前面

1.$(A).before(B)  把B放到A的前面

移除和清空元素

1.remove（） 从DOM中删除所有匹配的元素

2.empty（）删除匹配的元素集合中所有的子节点

替换

1.replaceWith（）

2.replaceAll（）

克隆

1.clone（）