jQuery基础 (一)—样式篇_学习笔记

首页免费课 jQuery基础 (一)—样式篇笔记

jQuery基础 (一)—样式篇

                
                Aaron艾伦
            Web前端工程师

                    查看讲师更多课程 
                    Aaron艾伦讲师的其他课程
                
H5+JS+CSS3 实现圣诞情缘
中级·122008
免费课程
                                
jQuery基础(二)—DOM篇
入门·114011
免费课程
                                
H5+JS+CSS3实现七夕言情
中级·211524
免费课程
                                
jQuery基础(四)—动画篇
初级·85050
免费课程
                                
jQuery基础(三)—事件篇
入门·89995
免费课程
                                
jQuery源码解析（DOM与核心模块）
高级·71437
免费课程
                                
                难度入门
            
                时长 2小时23分
            
                学习人数
            
综合评分9.30
                            1025人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.2
                                简洁易懂
                            
                                9.1
                                逻辑清晰

最热最新

Steelo_

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
<div class="div">
<p>div:first</p>
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>div:last</p>
<p>:odd</p>
</div>
</div>
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
</script>

<script type="text/javascript">
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
</script>

<script type="text/javascript">
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
</script>

<script type="text/javascript">
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
</script>


<h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:eq(2)</p>
</div>
<div class="aaron">
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
</div>
<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
</script>

<h3>:not</h3>
<div class="left">
<div>
<input type="checkbox" name="a" />
<p>Aaron</p>
</div>
<div>
<input type="checkbox" name="b" checked="checked"/>
<p>慕课</p>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<p>其他</p>
</div>
</div>
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked) + p").css("background-color", "#CD00CD");
</script>
</body>

</html>

查看全部

0 采集收起来源：jQuery选择器之基本筛选选择器
2018-03-30
qq_沐光_0

如果传入的参数是id则在id前加上前缀"#"，用于告诉jQuery我传入的是id；
如果传入的参数是class则在class前加上前缀".",用于告诉jQuery我传入的是class；
如果传入的参数是标签名则无需任何前缀，用于告诉jQuery我传入的是标签名；

查看全部

1 采集收起来源：jQuery选择器之元素选择器
2018-03-30
qq_沐光_0

1.在javascript中使用 “var divs = document.getElementsByClassName('aaron');”这样获取的是一个相同类的集合，如果你对这些元素进行操作（例如：修改样式），你必须将这些元素一个一个取出来，分别赋值，你不能对集合divs直接赋值(例如：// divs.style.background="blue";)2.假如你使用jquery的话，例如：$(".imooc")，取得一个集合，但是你可以直接对该集合进行赋值。这样就省略了一个元素一个元素赋值的过程。。

查看全部

2 采集收起来源：jQuery选择器之类选择器
2018-03-30
Steelo_

查看全部

0 采集收起来源：jQuery选择器之基本筛选选择器
2018-03-30
Steelo_

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>子选择器与后代选择器</h2>
<div class="left">
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
</div>

<script type="text/javascript">
//子选择器
//$('div > p') 选择所有div元素里面的子元素P
$('div > p').css("border", "1px groove red");
</script>

<script type="text/javascript">
//后代选择器
//$('div p') 选择所有div元素里面的p元素
$('div p').css("border", "1px groove red");
</script>

<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
<div>兄弟节点div, +~选择器不能向前选择</div>
<span class="prev">选择器span元素</span>
<div>span后第一个兄弟节点div</div>
<div>兄弟节点div
<div class="small">子元素div</div>
</div>
<span>兄弟节点span,不可选</span>
<div>兄弟节点div</div>
</div>

<script type="text/javascript">
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$(".prev + div").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$(".prev ~ div").css("border", "3px groove blue");
</script>

</body>

</html>

查看全部

0 采集收起来源：jQuery选择器之层级选择器
2018-03-30
Steelo_

查看全部

0 采集收起来源：jQuery选择器之层级选择器
2018-03-30

Steelo_

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

查看全部

0 采集收起来源：DOM对象转化成jQuery对象

2018-03-30

Steelo_

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

查看全部

0 采集收起来源：jQuery对象转化成DOM对象

2018-03-30

qq_沐光_0

百度的： https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

查看全部

0 采集收起来源：jQuery对象与DOM对象
2018-03-30
轻云淡雾

1、$(".first-div a:first-child") 查找class="first-div"下的第一个a元素,针对所有父级下的第一个 2、$(".first-div a:last-child") 查找class="first-div"下的最后一个a元素，针对所有父级下的最后一个如果只有一个元素的话，last也是第一个元素 3、$(".first-div a:only-child") 查找class="first-div"下的只有一个子元素的a元素也就是这个唯一子元素就是a 某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配这个元素 4、$(".last-div a:nth-child(2)") 查找class="last-div"下的第二个a元素 5、$(".last-div a:nth-last-child(2)") 查找class="last-div"下的倒数第二个a元素 jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

查看全部

0 采集收起来源：jQuery选择器之子元素筛选选择器
2018-03-30
松湖里de猫
```
$(":visible")//选择所有显示的元素

$(":hidden")//选择所有隐藏的元素
```
查看全部

0 采集收起来源：jQuery选择器之可见性筛选选择器
2018-03-30
蟲师

jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
HTML代码 <div>元素一</div> <div>元素二</div> <div>元素三</div> JavaScript代码 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性用jQuery找到所有的div元素（3个），因为jQuery 对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

查看全部

0 采集收起来源：jQuery对象转化成DOM对象
2018-03-29
蟲师

jQuery对象与DOM对象对于才开始接触jQuery库的初学者，我们需要清楚认识一点： jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象： <p id=”imooc”></p> 我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。普通处理，通过标准JavaScript处理： var p = document.getElementById('imooc'); p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径'; p.style.color = 'red'; 通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是DOM对象，通过DOM方法将自己的innerHTML与style属性处理文本与颜色。 jQuery的处理： var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red'); 通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法，调用自己的方法html与css处理，得到的效果与标准的JavaScript处理结果是一致的。通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：通过jQuery方法包装后的对象，是jQuery对象，它是一个新的对象 jQuery与DOM对象完全不是同一个东西，但是又似曾相似，因为他们都能处理DOM 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容问题，我们可以通过jQuery更友好的API进行开发，同时代码也会更加精短 PS：大家这里做个大概印象就OK，后面会有深入的讲解。

查看全部

0 采集收起来源：jQuery对象与DOM对象
2018-03-29
蟲师

$(doucment).ready的作用是等页面的文档(document）中的节点都加载完毕后，在执行后续的代码
原因：我们在执行代码的时候，可能会依赖页面的某一个元素，要确保这个元素真正的被加载完毕后才能正确的使用。
$("div").html()方法返回或者设置被选元素的内容(inner html)如果该方法未设置参数，则返回被选元素的当前内容
例子：$(selector).html() 返回元素内容
$(selector).html() 设置元素内容
$(selector).html(function(index,oldcontent)) 规定一个返回被选元素的新内容的函数

查看全部

0 采集收起来源：jQueryHelloWorld体验
2018-03-29
慕姐2893314

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

查看全部

0 采集收起来源：jQuery对象转化成DOM对象
2018-03-29

首页上一页 129 130 131 132 133 134 135 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的基础语法 2、jQuery当中的选择器 3、jQuery中的属性和样式

微信扫码，参与3人拼团

热搜

最近搜索清空

jQuery基础 (一)—样式篇