专题学习（jQuery）

最新推荐文章于 2024-08-10 16:15:00 发布

561jy

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量58

点赞数

分类专栏：专题学习文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_47782122/article/details/127020969

版权

专题学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jQuery:是对javascript封装的一个框架包,简化对javascript的操作
javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码足够少
 
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。

jquery-2.1.4.js

https://www.w3xue.com/manual/jq/manual_index.html

选择器

1.基本选择器
$(‘#id属性值’)  ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’)---------->class属性值选择器
$(‘*’)---------->通配符选择器 //所有的标签全选
$(‘s1,s2,s3’)-------->联合选择器

2.层次选择器
2.1 $(s1  s2) [后代选择器]后代选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div  span”)
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]
直接子元素选择器:在s1内部获得s2的子元素节点(直接孩子，孙子不算)
$(“div > span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>

2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(“div + span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>

2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(“div ~ span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>

3、基本筛选
3.1：first 
	用法：$("tr.first");单个元素组成的集合
3.2：last
	匹配找到的最后一个元素
3.3：not(selector)
	去除所有与给定选择器匹配的元素
3.4：even
	匹配所有索引值为偶数的元素，从0开始计数
3.5：odd
	匹配所有索引值为奇数的元素，从0开始计数
3.6：eq(index)
	匹配给定索引值的元素，从0开始计数
3.7：gt(index)
	匹配所有大于给定索引值的元素，从0开始计数
3.8：lt(index)
	匹配所有小于给定索引值的元素，从0开始计数
3.9：header
	匹配如h1,h2,h3之类的元素标题
//eq = equal   gt=great than   lt=less than

4. 内容过滤选择器
4.1 :contains(内容)包含内容选择器，获得节点内部必须通过标签包含指定的内容
$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>

4.2 :empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>//空格也算元素

4.3 :has(选择器)
内部包含指定元素的选择器
$(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>
<div><span class=”apple”></span></div>

4.4 :parent
寻找的节点必须作为父元素节点存在(必须是别人的父亲)
$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>

5、 表单域选中选择器
复选框、单选按钮、下拉列表

属性操作

<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom”
       address=”beijing”/>
1. JS:
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
自定义的属性例如address，只能通过getAttribute方式。

2. jquery方式操作属性(attribute)：property
$().attr(属性名称);               //获得属性信息值
$().attr(属性名称，值);        //设置属性的信息
$().removeAttr(属性名称);   //删除属性

//注意
jQuery 中 attr() 和 prop() 方法的区别
具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

css样式操作

$().css(name，value);        //设置
$().css(name);             //获取

//css（）样式操作特点
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式

② 复合属性样式需要拆分为"具体样式"才可以操作
例如：background 需要拆分为  background-color background-image 等进行操作
       border： border-left-style  border-left-width  border-left-color 等

jQ基础篇–jQuery对象与dom对象的区别与相互转换

https://segmentfault.com/a/1190000003710344

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZnyVwEX-1663980190785)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/026bf90b-8073-4ec3-ae23-9bf3bfdb5174/Untitled.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3oFYZJnF-1663980190786)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a712b60c-ca20-461b-8186-08a809fd4901/Untitled.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTeE4YNl-1663980190787)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c4c192b5-4487-4c20-b0ae-06125fa7c298/Untitled.png)]