大家好, 这里是 从零开始学 web 系列教程 , 并在下列地址同步更新......
github: https://github.com/Daotin/Web
微信公众号: Web 前端之巅 https://github.com/Daotin/pic/raw/master/wx.jpg
博客园: http://www.cnblogs.com/lvonve/
CSDN: https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始, 一步步学习 Web 相关的知识点, 期间也会分享一些好玩的项目. 现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一, jQuery 获取和操作元素属性
DOM 中有很多方式获取元素, 比如通过 id, 通过标签名, 通过类名, 通过 name 的值, 通过选择器等方式.
在 jQuery 中就只有一种方式:$("选择器")
1,id 选择器
语法:
- $("#id 选择器的值")
- $(function () {// 页面加载
- $("#btn").click(function () {
- console.log($(this).val());
- $(this).val("改变按钮");
- // this.value = "改变按钮";
- });
- });
注意: this 是 DOM 对象.
this.value = "改变按钮"; // 是 DOM 的写法, 没问题.
PS:jQuery 中使用
jQuery 对象. val("内容")
来设置表单标签的 value 属性.
2, 标签选择器
语法: $("标签名")
- $(function () {// 页面加载
- $("#btn").click(function () {
- $("p").text("桃花依旧笑春风");
- });
- });
1,jQuery 中的 .text() , 如果括号中没有值的话, 是获取文本内容; 如果有值的话, 就是设置文本内容.
2, $("p") 是获取所有的 p 标签, 然后全部设置文本内容, 我们并没有循环设置, 但是全部的 p 标签的文本内容都改变了, 这是 jQuery 内部自动循环了, 这就是隐式迭代.
3, 类选择器
语法:
$(". 类型选择器")
, 注意前面的点.
- $(function () { // 页面加载
- $("#btn").click(function () {
- $(".cls").CSS("border", "1px solid red");
- });
- });
点击按钮设置应用了 cls 类选择器的标签的边框样式.
PS:jQuery 中使用
jQuery 对象. css("属性":"值");
的方式设置标签的样式.
4, 并集选择器
语法:$("div,p,span"), 中间使用逗号隔开.
如果上面的 div 有 id 选择器 dv;span 有类选择器 cls;
上面的写法也可以这样写: $("#dv, p, .cls")
5, 交集选择器
语法:$("div.cls")
标签名 + 类样式的方式.
小总结: jQuery 中的一些方法
- val(); // 获取或设置表单标签中的 value 值.
- css(); // 设置元素的 css 样式属性值.
- text(); // 获取或设置标签的文本内容 ---- 相当于 DOM 中的 innerText
- html(); // 获取或设置标签的 html 内容 ---- 相当于 DOM 中的 innerHTML
6, 后代 (层次) 选择器
语法:$("div ul span")
选择 div 下面所有 ul 下的所有的 span 标签, 不包括 div 下面的 span, 必须在 ul 里面.
7, 子代选择器
语法:$("div>span")
选择 div 的直接下一代的所有 span, 不能隔代.
8, 兄弟选择器
语法:$("div~span")
选择的是 div 后面的所有兄弟标签为 span 的标签.
9, 直接兄弟选择器
语法:$("div+span")
选择的是 div 后面的直接兄弟标签, 如果这个直接兄弟为 span 标签则选中, 如果为其他标签则不选中.
9.1, 案例: 各行变色
- // body 主要内容
- <input type="button" value="按钮" id="btn">
- <div>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- </ul>
- </div>
- // jQuery 代码
- $(function () {
- $("#btn").click(function () {
- $("div li:odd").css("backgroundColor", "red");
- $("div li:even").css("backgroundColor", "yellow");
- });
- });
:odd 选择第奇数个 li 标签.
:even 选择第偶数个 li 标签.
9.2, 案例: 下拉菜单
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * {
- margin: 0 ;
- padding: 0;
- }
- li{
- list-style-type: none;
- }
- a {
- text-decoration: none;
- }
- #dv>ul>li {
- float: left;
- margin: 0 10px;
- width: 50px;
- height: 20px;
- background-color: pink;
- }
- #dv>ul>li ul {
- display: none;
- }
- #dv>ul>li li {
- background-color: #ff486b;
- }
- </style>
- <script src="jquery-1.12.4.js"></script>
- <script>
- $(function () {
- // 鼠标进入
- $("#dv>ul>li").mouseenter(function () {
- $(this).children("ul").stop().show(200);
- });
- // 鼠标离开
- $("#dv>ul>li").mouseleave(function () {
- $(this).children("ul").stop().hide(200);
- });
- });
- </script>
- </head>
- <body>
- <!--<input type="button" value="按钮" id="btn">-->
- <div id="dv">
- <ul>
- <li>
- <a href="javascript:void(0);">周杰伦</a>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);">林俊杰</a>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </li>
- <li>
- <a href="javascript:void(0);">陈奕迅</a>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
- </html>
1,jQuery 中鼠标进入事件是: mouseenter; 鼠标离开事件是: mouseleave
2,css 中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法: show() 和 hide();
3,show 和 hide 方法中可以添加参数, 数字表示毫秒. 表示的显示和隐藏的动画效果.
4,stop 方法表示在显示和隐藏之前先清除之前的动画效果, 防止鼠标操作过快, 动画的显示跟不上操作.
10, 过滤选择器
这类选择器都带有冒号.
- :eq(index) // 选择一个给定索引值的元素
- :odd // 选择索引为奇数的元素
- :even // 选择索引为偶数的元素
用法:
- $("li:eq(2)") // 匹配 li 元素中, 索引为 2 的元素
- $("li:odd") // 匹配 li 元素中, 索引为奇数的元素
- $("li:even") // 匹配 li 元素中, 索引为偶数的元素
10.1, 案例: 淘宝精品展示
效果: 鼠标进入标签, 标签的背景颜色改变, 并且切换到对应的图片显示.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- li {
- list-style-type: none;
- }
- #dv {
- margin-left: 500px;
- margin-top: 200px;
- }
- .ul1 li, .ul3 li {
- width: 50px;
- height: 30px;
- /*background-color: #24bcff;*/
- border: 1px solid red;
- text-align: center;
- margin-top: -1px;
- }
- a {
- text-decoration: none;
- }
- ul {
- float: left;
- }
- img {
- width: 200px;
- height: 93px;
- }
- .ul2 {
- width: 200px;
- height: 93px;
- overflow: hidden;
- }
- .ul2 li {
- float: left;
- }
- </style>
- </head>
- <body>
- <div id="dv">
- <ul class="ul1">
- <li><a href="javascript:void(0);">img1</a></li>
- <li><a href="javascript:void(0);">img2</a></li>
- <li><a href="javascript:void(0);">img3</a></li>
- </ul>
- <ul class="ul2">
- <li><img src="images/img1.jpg"></li>
- <li><img src="images/img2.jpg"></li>
- <li><img src="images/img3.jpg"></li>
- </ul>
- </div>
- <script src="common.js"></script>
- <script src="jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- // 左 li 鼠标进入
- $(".ul1>li").mouseenter(function () {
- $(this).css("backgroundColor", "purple");
- // console.log($(this).index());
- // 隐藏所有的图片
- $(".ul2>li").hide();
- // 显示丢应的图片
- $(".ul2>li:eq("+ $(this).index() +")").show();
- });
- // 左 li 鼠标离开
- $(".ul1>li").mouseleave(function () {
- $(this).css("backgroundColor", "");
- });
- });
- </script>
- </body>
- </html>
1,$(this).index() 可以获取当前 li 的索引.
2,:eq() 选择器: 匹配一个给定索引值的元素.
3,.hide() 隐藏一个元素; .show() 显示一个元素.
11, 筛选选择器
名称 | 用法 | 描述 |
---|---|---|
children(选择器) | $("ul").children("li"); | (子类选择器)相当于 $("ul>li") |
find(选择器) | $("ul").find("li"); | (后代选择器)相当于 $("ul li") |
eq(index) | $("li").eq(2) | 相当于 $("li:eq(2)"); |
parent() | $("#first").parent(); | 查找父亲 |
next() | $("li").next("li"); | 查找下一个兄弟节点 |
prev() | $("li").prev("li"); | 查找上一个兄弟节点 |
nextAll() | $("li").nextAll("li"); | 查找后面所有的兄弟节点 |
prevAll() | $("li").prevAll("li"); | 查找上面所有的兄弟节点 |
siblings(选择器) | $("#first").siblings("li"); | 查找除自身之外的所有兄弟节点 |
当 next, prev 系列的方法, 如果没写参数, 则查找所有的兄弟节点; 如果有参数, 则查找所有兄弟节点中的指定元素.
来源: https://www.cnblogs.com/lvonve/p/9270007.html