本文深入讲解了jQuery框架的使用，涵盖了框架导入、选择器、属性和内容操作、CSS操纵及元素操作等内容。通过实例演示了如何利用jQuery进行元素选择、属性设置、内容修改和样式调整。
jQuery框架笔记
最后更新日期：2020-4-25
今日日志
学习内容
- jQuery框架的导入
- jQuery框架的使用
- jQuery框架的选择器
练习内容
-
无序列表鼠标移入背景的变化
$(function() { $(".div01>ul>li").mouseenter(function(){ $(this).css("background-color","blue").siblings("li") .css("background-color","pink"); }).mouseleave(function(){ $("li").css({"background-color":"white"}); }) }) -
抽奖效果练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; background-color: black; } li{ list-style: none; display: inline-block; } div{ width: 580px; height: 345px; padding: 10px 10px; border: solid aliceblue 1px; position: relative; left: 400px; top: 100px; } </style> <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(function(){ $(".wrap>ul>li").mouseenter(function(){ $(this).css("opacity","1").siblings("li") .css("opacity","0.5"); }).mouseleave(function(){ $("li").css({"opacity":"1"}); }) }) </script> </head> <body> <!--当前的图片为完全不透明，其它的图片是半透明。 --> <div class="wrap"> <ul> <li> <a href="#"><img src="img/1.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/2.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/3.jpg" alt="" /></a> </li> <br /> <li> <a href="#"><img src="img/4.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/5.jpg" alt="" /></a> </li> <li> <a href="#"><img src="img/6.jpg" alt="" /></a> </li> </ul> </div> </body> </html>
易错点和经验点
-
js中的.innerHTML=’‘用jQuery中的.html(’’)代替
-
js中的DOM使用var jq=$(js的DOM对象)转换为jQuery的DOM对象
-
jQuery对象转js对象
语法：var js对象 = jQuery对象[索引]，或= jQuery对象.get(索引值)
-
伪类选择器的第一类（:only-child）和第二类(:only-child-type)的区别是第二类会根据元素类型进行分组，在根据分组来根据第一类选择。
-
元素查找方法：sibings()查找同级元素、children()查找子元素、find()查找指定元素。（参数为指定的元素无参时查找所有的元素）
jQuery选择器
基础选择器
基本选择器
-
元素选择器
语法
$("元素名") //使用举，其中$(function)类似于window.onload; $(function () { $("div").css("color","red");//将所有div元素的颜色设置为red }) //表示在DOM对象载入完成后执行，上方法为本方法的简写 $(document).ready(function){ } -
id选择器
语法
$("#id名")//用法类比上方方法 -
类选择器
语法
$(".类名")//用法同上 -
群组选择器
语法
$("选择器1 , 选择器2 ,……,选择器n")//用法同上 -
*选择器
语法
*{padding:0;margin:0;}
层次选择器
| 选择器 | 说明 |
|---|---|
| $(“M N”) | 后代选择器，选择M元素内部后代N元素（所有N元素） |
| $(“M>N”) | 子代选择器，选择M元素内部子代N元素（所有第1级N元素） |
| $(“M~N”) | 兄弟选择器，选择M元素后所有的同级N元素 |
| $(“M＋N”) | 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素） |
- 后代选择器
语法
$("M N")
//用法
$("M N").css("color","red");
-
子代选择器
语法
$("M>N")//用法同上 -
兄弟选择器
语法
$("M～N")//用法同上 -
相邻选择器
- 兄弟选择器选取元素后面“所有”的某一类元素；
- 相邻选择器选取元素后面“相邻”的某一个元素；
- $("#second+p")表示选取id为second的元素后面的“相邻”的兄弟元素p。
语法
$("M+N")//用法同上
属性选择器
| 选择器 | 说明 |
|---|---|
| $(“selector[attr]”) | 选择包含给定属性的元素 |
| $(“selector[attr=‘value’]”) | 选择给定的属性是某个特定值的元素 |
| $(“selector[attr != ‘value’]”) | 选择所有含有指定的属性，但属性不等于特定值的元素 |
| $(“selector[attr *= ‘value’]”) | 选择给定的属性是以包含某些值的元素 |
| $(“selector[attr ^= ‘value’]”) | 选择给定的属性是以某些值开始的元素（比较少用） |
| $(“selector[attr $= ‘value’]”) | 选择给定的属性是以某些值结尾的元素（比较少用） |
| $(“selector[selector1][selector2]…[selectorN]”) | 复合属性选择器，需要同时满足多个条件时使用 |
selector指的是选择器，attr指的是属性（attribute），value指的是属性值。
伪类选择器
在js中像超接连的link、hover、active等以“：”开头的为伪类选择器
-
简单的伪类选择器
伪类选择器 说明 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素（非子元素） :last或last() 选择某元素的最后一个元素（非子元素） :odd 选择某元素的索引值为奇数的元素 :even 选择某元素的索引值为偶数的元素 :eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始 :lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始 :gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始 :header 选择h1~h6的标题元素 :animated 选择所有正在执行动画效果的元素 :root 选择页面的根元素 :target 选择当前活动的目标元素（锚点）
子元素伪类选择器
第一类子元素伪类选择器
| 选择器 | 说明 |
|---|---|
| :first-child | 选择父元素的第1个子元素 |
| :last-child | 选择父元素的最后1个子元素 |
| :nth-child(n) | 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even” |
| :only-child | 选择父元素中唯一的子元素（该父元素只有一个子元素） |
第二类子元素伪类选择器
| 选择器 | 说明 |
|---|---|
| :first-of-type | 选择同元素类型的第1个同级兄弟元素 |
| :last-of-type | 选择同元素类型的最后1个同级兄弟元素 |
| :nth-of-type | 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even” |
| :only-of-type | 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素） |
两类选择器的区别
- 第二类和第一类选择器的区别是第一类选择器在有多种类型的选择器时不会根据类型进行分组，按照分组分别计算。
- :only-child会选择只有一个子元素的父元素，子元素名:only-child-type会选择只要子元素中有该子元素名的所有父元素，无论该父元素有几个子元素，可以存在多个其他类型的子元素，但是子元素中该子元素类的只能有一个。
可见性伪类选择器
- 根据元素的可见和不可见两种状态来选取元素
- “:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。
| 选择器 | 说明 |
|---|---|
| :hidden | 选取所有不可见元素 |
| :visible | 选取所有可见元素，与:hidden相反 |
内容伪类选择器
- 文字内容可以模糊
| 选择器 | 说明 |
|---|---|
| :contains(text) | 选择包含给定文本内容的元素 |
| :has(selector) | 选择含有选择器所匹配元素的元素 |
| :empty | 选择所有不包含子元素或者不包含文本的元素 |
| :parent | 选择含有子元素或者文本的元素（跟:empty相反） |
:contains()
语法：
$("Element:contains(text)")//text为元素包含的内容可以进行模糊化处理
E:has(selector)
语法:
$(":has(selector)")
选择包含选择器内容的E，并非只是选择器选中的部分
:empty
- 选中没有子元素或者没有文本的空元素
:parent
- 选中含有子元素和文本的元素，和empty相反。
表单伪类选择器
| 选择器 | 说明 |
|---|---|
| :input | 选择所有input元素 |
| :button | 选择所有普通按钮，即type="button"的input元素 |
| :submit | 选择所有提交按钮，即type="submit"的input元素 |
| :reset | 选择所有重置按钮，即type="reset"的input元素 |
| :text | 选择所有单行文本框 |
| :textarea | 选择所有多行文本框 |
| :password | 选择所有密码文本框 |
| :radio | 选择所有单选按钮 |
| :checkbox | 选择所有复选框 |
| :image | 选择所有图像域 |
| :hidden | 选择所有隐藏域 |
| :file | 选择所有文件域 |
表单属性伪类选择器
| 选择器 | 说明 |
|---|---|
| :checked | 选择所有被选中的表单元素，一般用于radio和checkbox |
| option:selected | 选择所有被选中的option元素 |
| :enabled | 选择所有可用元素，一般用于input、select和textarea |
| :disabled | 选择所有不可用元素，一般用于input、select和textarea |
| :read-only | 选择所有只读元素，一般用于input和textarea |
| :focus | 选择获得焦点的元素，常用于input和textarea |
jQuery操作元素
属性操作
获取元素属性
语法
$().attr("属性名")
设置元素属性
语法
$().attr("属性名","属性值");
删除元素属性
语法
$().removeAttr("属性");
内容操作
获取和设置内容
html()和text()
$().html() //获取HTML内容
$().html("HTML内容"); //设置HTML内容
$().text() //获取文本内容
$().text("文本内容") //设置文本内容
获取和设置表单的值
$().val() //获取表单元素
$().val("表单元素的值") //设置表单元素
jQuery的CSS操纵
CSS属性操作
$().css("属性")//获取属性
$().css("属性","属性值")//设置单个属性值
$().css({"属性1":"属性值1","属性2":"属性值2",……})//设置多个属性值
$().css({"属性":"属性值"})//也可以用多属性的方式设置单个属性
CSS的类名操作
$().addClass("类名")//添加类名
$().removeClass("类名")//删除类名
$().toggleClass("类名")//改变类名
元素的宽高
和CSS(“width”)相比获取的值不带单位。
$().width() //获取元素的宽度
$().width(n) //设置元素的宽度，n是一个整数，表示npx
$().height() //获取元素的高度
$().height(n) //设置元素的高度，n是一个整数，表示npx
元素的位置offset()和position()
$().offset();//获取的是相对于浏览器的偏移量，分别为top，left两个值。
$().offset().top;
$().offset().left;
$().position();//获取的是相对于父元素的位置，分别为top，left两个值。
$().position().top;
$().position().left
扫一扫
1351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
