jQuery零基础入门知识点有哪些

这篇“jQuery零基础入门知识点有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jQuery零基础入门知识点有哪些”文章吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、和平网站维护、网站推广。

jQuery = JavaScript + Query，是辅助JavaScript开发的类库，它的核心思想是写的更少，做的更多，注意：使用jQuery一定要先通过script标签的src属性引入jQuery库

传入的参数为函数时，在HTML文档加载完成之后自动的执行这个函数

传入的参数为HTML语言时，创建标签对象（jQuery对象）

传入的参数为选择器字符串时：

$（“#属性值”）：id选择器，根据id查询标签对象（jQuery对象）$（“标签名”）：标签名选择器，根据指定的标签名查询标签对象（jQuery对象）$（“。属性值”）：类选择器，根据class属性值查询标签对象（jQuery对象）

传入的参数为DOM对象时，会把这个DOM对象转换为jQuery对象

通过getElement（s）Byxxx或createElement（）得到的标签对象是DOM对象DOM对象Alert出的效果是：[object HTML标签名 Element]

通过$函数创建的对象是jQuery对象，如二（2）： 通过jQuery包装的DOM对象是jQuery对象，如二（4）通过$函数查询到的对象也是jQuery对象，如二（3）jQuery对象Alert出的效果是：[object Object]

jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

DOM对象转换为jQuery对象：

先有DOM对象$（DOM对象）就可转换为jQuery对象

jQuery对象转换为DOM对象：

先有jQuery对象jQuery对象[下标]即可取出对应的DOM对象

3.

jQuery对象。click（ function（）{} ）；添加点击响应函数jQuery对象。css（“background-color”，“xxx”）；可设置背景颜色jQuery对象。val（）；可以获取、赋值表单项的value属性jQuery对象。each（function（）{}）；遍历DOM对象数组的方法，function中写每次遍历到的对象要执行的方法，function中使用this代表当前遍历到的DOM对象

代码示例：

详细可参考jQuery文档，文档获取方式在文章末尾

#id ：根据id查找标签对象element ：根据标签名查找标签对象。class ：根据class查找标签对象*：查找所有元素的标签对象selector1，selector2…selectorN ：合并选择器1，选择器2…选择器N的标签对象并返回

ancestor descendant ：在给定的祖先元素下匹配所有的后代元素parent > child ：在给定的父元素下匹配所有的子元素prev + next ：在同级的情况下匹配所有紧接在prev元素后的next元素prev —— siblings ：在同级的情况下匹配prev元素之后的所有siblings元素

注意：标签名前置，即冒号之前为标签名

：first ：获取匹配的第一个元素：last ：获取匹配的最后一个元素：not（selector） ：去除所有与给定选择器匹配的元素：even ：匹配所有索引值为偶数的元素，从0开始计数：odd ：匹配所有索引值为奇数的元素，从0开始计数：eq（index） ：匹配一个给定索引值的元素（索引从0开始计数）：gt（index） ：匹配所有大于给定索引值的元素（索引从0开始计数）：lt（index） ：匹配所有小于给定索引值的元素（索引从0开始计数）：header ：匹配如h2、h3、h4之类的标题元素：animated ：匹配所有正在执行动画效果的元素

注意：标签名前置，即冒号之前为标签名

：contains（text） ：匹配包含给定文本的元素：has（selector） ：匹配含有选择器所匹配的的元素的元素：empty ：匹配所有不包含子元素或文本的空元素：parent ：匹配含有子元素或文本的元素

5.属性过滤选择器

注意：标签名前置，即中括号之前为标签名

：匹配包含给定属性的元素 ：匹配给定的属性是某个特定值的元素 ：匹配所有不含有指定的属性或属性不等于特定值的元素：匹配给定的属性是以某些值开始的元素 ：匹配给定的属性是以某些值结尾的元素 ：匹配给定的属性是以包含某些值的元素 ：复合属性选择器，需要满足多个条件时使用

注意：标签名前置，即冒号之前为标签名

：input ：匹配所有input标签元素，不论type为哪种类型：text \ :password \ :radio \ :checkbox \ :submit \ :image \ :reset \ :button \ :file \ :hidden ：匹配所有input标签中type为指定类型的元素：enabled ：匹配所有可用元素（disabled属性设置为disabled为不可用：无法填入内容或选中）：disabled ：匹配所有不可用元素：checked ：匹配所有被选中的元素（复选框、单选框等，不包括select中的option）：selected ：匹配所有选中的option元素

详细可参考jQuery文档，文档获取方式在文章末尾

last（）：获取最后一个元素（功能跟：last一样）first（）：获取第一个元素（功能跟：first一样）eq（）：获取给定索引的元素（功能跟：eq（）一样）filter（exp）：留下匹配的元素is（exp）：判断是否匹配给定的选择器，只要有一个匹配就返回truehas（exp）：返回包含有匹配选择器的元素的元素（功能跟：has一样）not（exp）：删除匹配选择器的元素（功能跟：not一样）children（exp）：返回匹配给定选择器的子元素（功能跟parent>child一样）find（exp）：返回匹配给定选择器的后代元素（功能跟ancestordescendant-样）next（）：返回当前元素的下一个兄弟元素（功能跟prev + next功能一样）nextAll（）：返回当前元素后面所有的兄弟元素（功能跟prev—— siblings 功能一样）nextUntil（）：返回当前元素到指定匹配的元素为止的后面元素parent（）：返回父元素prev（exp）：返回当前元素的上一个兄弟元素prevAll（）：返回当前元素前面所有的兄弟元素prevUnit（exp）：返回当前元素到指定匹配的元素为止的前面元素siplings（exp）：返回所有兄弟元素add（）：把add 匹配的选择器的元素添加咧当前jquery 对象中

不传参数是获取，传递参数是设置

html（）方法：可以设置和获取起始标签和结束标签中的内容（包括两边的标签）text（）方法：可以设置和获取起始标签和结束标签中的文本（不包括两边的标签）val（）方法：可以设置和获取表单项的value属性值

代码示例：val（）方法可同时设置多个表单项的选中状态

attr（）方法：可以设置和获取属性的值，不推荐操作checked、selected、disabled、readOnly，还可以操作自定义属性。prop（）方法：可以设置和获取属性的值，只推荐操作checked、selected、disabled、readOnly

代码示例：

代码示例：全选、全不选、反选

appendTo（）：a.appendTo（b） 把a插入到所有b子元素的末尾，成为最后一个子元素prependTo（）：a.prependTo（b） 把a插入到所有b子元素的前面，成为第一个子元素

insertAfter（）：a.insertAfter（b） 同级的情况下得到bainsertBefore（）：a.insertBefore（b） 同级的情况下得到ab

replaceWith（）：a.replaceWith（b） 用一个b替换掉所有areplaceAll（）：a.replaceAll（b） 用a替换掉所有b（有几个b就替换几次）

remove（）：a.remove（） 删除a标签及其所有内容（包括文字或子标签等）empty（）：a.empty（） 清空a标签的内容（包括文字或子标签等），标签留下

代码示例：两个复选框的内容从左到右、从右到左的练习

动态添加、删除表格记录

addClass（）：添加样式

removeClass（）：删除样式

toggleClass（）：有则删除，无则添加样式

offset（）：获取和设置元素的坐标，设置时必须有两个属性top和left

设置时的格式：jQuery对象。offset（{top:值，left:值}）；

以下动画方法都可以添加参数：

第一个参数是动画执行的时长，以毫秒为单位

第二个参数是回调函数：function（）{}，即动画完成之后自动执行的函数

基本动画：

show（）：将隐藏的元素显示

hide（）：将显示的元素隐藏

toggle（）：显示则隐藏，隐藏则显示

淡入淡出动画：

fadeIn：淡入fadeOut（）：淡出fadeToggle（）：淡入/淡出切换fadeTo（）：在指定时长内将透明度修改到指定的值，0代表透明，1代表可见，0.5代表半透明

第一个参数指定时长（ms），第二个参数设置透明度，第三个参数设置回调函数

触发时间：

jQuery是浏览器的内核解析完页面的标签（如body中的标签），创建好DOM对象之后就会立马执行，此时页面上没有任何内容JS是浏览器的内核解析完标签创建好DOM对象之后等标签显示时的内容（如图片，网页等）加载完成之后执行，此时页面上已经有body中的内容 触发顺序：jQuery先、JS后各有多个时执行的次数：

jQuery所有function函数都会按照顺序执行JS只会执行最后一个function函数

click（）：可以绑定单击事件（参数中传function（）{}），可以触发单击事件（参数中无function）mouseover（）：鼠标移入事件mouseout（）：鼠标移出事件bind（）：可以给元素一次性绑定一个或多个事件，第一个参数加双引号，其中放空格隔开的多个事件，第二个参数是function（）{}，即事件响应后的代码one（）：用法与bind一致，但是one方法绑定的事件只会响应一次unbind（）：与bind方法相反的操作，解除事件的绑定live（）：用来绑定事件，即使这个元素先前并未绑定，而是后面动态创建出来的也自动绑定

事件的冒泡是指父子元素绑定同一个事件时，当触发子元素的事件时，父元素的同一个事件也随之自动的响应，如：

阻止事件的冒泡发生：在子元素的事件函数体内return false;

事件对象：包含触发的事件的所有信息的一个对象获取事件对象的方式：在给元素绑定事件时函数格式为function（event）{}，参数中的名字可任意，一般取名为event，这个event就是事件对象

以上就是关于“jQuery零基础入门知识点有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。