D30--jQuery基础

其他 2019-01-05 08:30:54 阅读次数: 0

一 、 jQuery对象与js对象之间的转换

  • js的DOM对象转换成jQuery对象： ${js对象} 或者 jQuery(js对象)；
  • jQuery对象转换成js对象： jQuery对象[索引] 或者jQuery对象.get(索引)
  • 语法：
  • $(“选择器”)或者jQuery(“选择器”)
    1. var 元素对象 =$("#id值")；
    1. 元素对象.val(); //获取当前对象上value属性的值
  • 获取输入框的value属性的值:
<<script>

		//获取dom对象
		var Obj=document.getElementById("username");
		//获取jq对象
		var $jqObj= $("#username");
		//alert("jq"+$jqObj);

		//dom对象----->jq对象
		//var $userObj1=jQuery(Obj);
		var $userObj1 = $(Obj);
		alert($userObj1.val())

		//jq对象----->dom对象
		//var jqObj1=$jqObj[0];
		var jqObj1=$jqObj.get(0);
		alert("jq:"+jqObj1.value)
	</script>

JavaScript和jQuery区别

  • 注意事项：
    1. 使用jQuery的方式获取的对象称为**jQuery对象。**jQuery对象本质上是js对象数组。
    1. 使用dom的方式获取的对象称为dom（js）对象。
  • 3.两者的方法和属性不能混用：使用jQuery的方法和属性时，必须保证对象是jQuery对象。

二 、 页面加载事件

2.1 格式

  • 方式一： $(doucument).ready(function(){
    //编写代码
    });
  • 方式二： $(function(){
    //编写代码
    });
  • 代码：
<script>

			//js的同名方法会被覆盖
			onload = function () {
			    alert(1);
			}
			onload = function () {
				alert(2)
            }

            //js的页面加载事件
			//方式一：jq对象的方法
			$(document).ready(function () {
				alert("A")
            });
			$(document).ready(function () {
				alert("B")
            });
			$(function () {
				alert("AAA")
            })
			$(function () {
				alert("BBB/")
            })
		</script>

2.2 回顾js事件

事件 功能
onload 页面加载事件
onclick 单击事件
onsubmit 表单提交事件
onblur 失去焦点
onfocus 获取焦点
onchange 改变事件

2.3 js的事件和事件源绑定

2.3.1 方式一：绑定事件

2.3.2 方式二：派发事件

在js代码中获取事件源对象。

  • var 元素对象 = document.getElementByID(“id”);
  • 元素对象.事件名称 = function(){}

2.4 页面加载成功事件

  • 格式一： $(document).ready（function（）{}）;
  • 格式二： $(function（）{});

注意：

  • 在同一个夜间内，jQuery的页面加载成功事件可以出现多次，随机执行（jQuery3.0以后），js的页面加载成功事件能出现多次，但只有最后一个的生效。
  • jQuery2.0以前先执行jQ的页面加载成功事件（有序执行）

2.4.1 重点事件

  • click（fun（））

  • change（fun（））

  • submit（fun（））

  • focus（fun（））

  • blur（fun（））

  • 如果你想将jq代码写在head标签中,那么要保证页面加载成功后,才能使用jq的事件

  • jquery对象.事件名称(function(){});

三、 jQuery选择器

3.1 基本选择器

3.1.1 语法

选择器名称 语法 解释
标签选择器（元素选择器） $(“html标签名”) 获得所有匹配标签名称的元素
id选择器 $("#id的属性值") 获取与指定id属性匹配的元素
类选择器 $(".class的属性值") 获取与指定的class属性相匹配的元素

注意： 多个选择器之间用逗号隔开

  • 代码：
<script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                $("#one").css("background-color", "#0ff")
            });
            //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
            $("#btn2").click(function () {
                $(".mini").css("background-color", "#ff0")
            });
            //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
            $("#btn3").click(function () {
                $("div").css("background-color", "#f00");
            })
            //<input type="button" value="选择 所有的元素." id="btn4" />
            $("#btn4").click(function () {
                $("*").css("background-color", "yellow")
            });
            //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
            $("#btn5").click(function () {
                $("span,#two").css("background-color", "#f0f")
            });
        });

    </script>

3.2 层级选择器

3.2.1 语法

选择器名称 语法 解释
后代选择器 $(“A B”) 选择A元素内部的所有B元素
子选择器 $(“A>B”) 选择A元素内部的所有B子元素

扩展：

  • $(“A+B”):选择A元素内部的第一个B子元素

  • $(“A~B”):选择A元素的所有的B弟弟。

  • 代码演示：

<script type="text/javascript">
        $(function () {
            //<input type="button" value="选择 body内的所有div元素." id="btn1" />
            $("#btn1").click(function () {
                $("body div").css("background-color", "#f00");
            });
            // <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
            $("#btn2").click(function () {
                $("body>div").css("background-color", "#0f0");
            });
            // <input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
            $("#btn3").click(function () {
                $("#one+div").css("background-color", "#00f");
            });
            // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
            $("#btn4").click(function () {
                $("#two~div").css("background-color", "#ff0")
            });
        });
    </script>

3.3 属性选择器

3.3.1 语法

选择器名称 名称 解释
属性选择器 $(“A[属性名]”) 包含指定属性的选择器
属性选择器 $(“A[属性名=值]”) 包含指定属性等于指定值的选择器
复合属性选择器 $(“A[属性名 = 值]…”) 包含多个属性条件的选择器
  • 代码实现：
<script type="text/javascript">
			$(function() {
                //<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
				$("#btn1").click(function () {
					$("div[title]").css("background-color","pink")
                });
                //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
				$("#btn2").click(function () {
					$("div[title=test]").css("background-color","orange");
                });
			});
		</script>

3.4 基本过滤选择器

3.4.1 语法

选择器名称 语法 解释
首元素选择器 ：first 获取选择的元素的第一个元素
尾元素选择器 ：last 获取选择元素的最后一个元素
非元素选择器 ：not（selecter） 不包括指定内容的元素
偶数选择器 ：even 偶数，从0开始计数
奇数选择器 ：odd 奇数，从0开始计数
等于索引选择器 ：eq（index） 指定索引元素
大于索引选择器 ：gt(index) 大于指定索引元素
小于索引选择器 ：It(index) 小于指定索引元素
标题选择器 :header 获取标题元素，固定写法
  • 代码实现：
<script type="text/javascript">
        $(function () {
            // <input type="button" value="选择第一个div元素." id="btn1" />
            /*	$("#btn1").click(function () {
                    $("div:first").css("background-color","red");
                });*/
            $("#btn1").click(function () {
                $("div:first").css("background-color", "red");
            });

            // <input type="button" value="选择最后一个div元素." id="btn2" />
            $("#btn2").click(function () {
                $("div:last").css("background-color", "yellow");
            });

            // <input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
            $("#btn3").click(function () {
                $("div:even").css("background-color", "#0f0")
            });
            // <input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
            $("#btn4").click(function () {
                $("div:odd").css("background-color", "#00A")
            });
            // <input type="button" value="选择索引值等于3的div元素." id="btn5" />
            $("#btn5").click(function () {
                $("div:eq(3)").css("background-color", "#a0A");
            });
            // <input type="button" value="选择索引值大于3的div元素." id="btn6" />
            $("#btn6").click(function () {
                $("div:gt(3)").css("background-color", "#666")
            });
            /* $("#btn6").click(function () {
                 $("div:gt(3)").css("background-color","#666");
             });*/
            // <input type="button" value="选择class不为one的 所有div元素." id="btn7" />
            $("#btn7").click(function () {
                $("div:not('.one')").css("background-color", "#dff")
            });
        });
    </script>

3.5 表单属性选择器

3.5.1 语法

选择器名称 语法 解释
可用元素选择器 ：enabled 获取可用元素
不可用元素选择器 ：disabled 获取不可用元素
选中选择器 ：checked 获得单选/复选框选中的元素
选中选择器 ：selected 获得下拉框选中的元素
  • 代码实现：
<script type="text/javascript">
        $(function () {
            //<button id="btn1">对表单内 可用input 赋值操作.</button>
            $("#btn1").click(function () {
                $("input:enabled").val("这个输入框可以使用....")
            });
            //<button id="btn2">对表单内 不可用input 赋值操作.</button>
            $("#btn2").click(function () {
                $("input:disabled").val("这个输入框不可以使用....")
            });
            //<button id="btn3">获取多选框选中的个数.</button>.
            $("#btn3").click(function () {
                alert($("input:checked").length);
            });
            //<button id="btn4">获取下拉框选中的个数.</button>
            $("#btn4").click(function () {
                alert($("select>option:selected").length);
            });
        });
    </script>

四、jQuery的DOM操作

4.1 jQuery对DOM树中的文本和值进行操作

4.1.1 语法

  • val() ：对value属性的操作
  • jq对象.val(); 获取value属性的值
  • jq对象.val(“值”)； 设置value属性的值
  • html（） ：对标签体的操作（等同于js的innerHTML属性）
    1. jq对象.html(); 获取标签体的内容
    1. jq对象.html(“值”); 设置标签体的内容
  • text() :对标签体的操作（等同于js的innerText属性）
    1. jq对象.text();获取标签体的内容
    1. jq对象.text(“值”); 设置标签体的内容

4.1.2 html和text区别

  • 设置内容： html可以将内容解析，text只是作为普通文本
  • 获取内容： html获取所有源码内容，text只是获取文本内容
  • 代码实现：
<script type="text/javascript">
        $(document).ready(function () {

            //1 获取 username的value属性的值
            //alert($("input[name]")); 获取的是一个地址值
            var $userObj = $("input[name=\"username\"]");
            //alert($userObj.val())
            //2 设置 username的默认值为"许多多"
            //$userObj.val("xuduoduo");
            //3通过html获取div标签体的内容
            var $div = $("div");
            //alert($div.html());
            //4通过html设置div标签体的内容
            //$div.html("hahhaha");
            //5通过text获取div标签体的内容
            alert($div.text());
            //6通过text设置div标签体的内容
            $div.text("enenenene");
            //7 两者设置值的区别
            /*
            html: 设置内容时,如果内容中有html代码,HTML代码会被解析
            $div.html("<h1>已满18,请戴眼镜.</h1>");
            text: 设置内容时,如果内容中有html代码,HTML代码不会被解析
            $div.text("<h1>已满18,请戴眼镜.</h1>");
             */
            //8 两者获取值的区别
            /*
            html: 获取标签体内容时,获取的是所有内容
             alert($div.html());
             text: 获取标签体内容时,获取的仅仅是标签体的文本信息
             alert($div.text());
             */

        });
    </script>

4.1.3 文档处理

4.1.3.1 内部插入

  • append：

  • a.append（c）： 将c插入到a的内部的后面

  • prepend：

  • a.prepend(c ) 将c插入到a的内部的前面

<script type="text/javascript">
			$(document).ready(function() {
                var $city=$("#city");
                var $fk=$("#fk");
                //1.在city内部的后面追加 反恐
				//$city.append($fk);
				//2.在city内部的前面插入 反恐
				$city.prepend($fk)
			});
		</script>

4.1.3.2 外部插入

  • after： a.after(c ) 将c插入到a的后面
  • before a.before(c ) 将c插入到a的前面
  • 代码实现：
<script type="text/javascript">
			$(document).ready(function() {
			    //获取操作对象
				var $city=$("#city")
				var $p2=$("#p2");
				//1.在 p2 的后面插入 city
				//$p2.after($city)
				//2.在 p2 的前面插入 city
                $p2.before($city)

			});
		</script>

4.1.3.3 删除

  • empty(): 清空元素 (清空所有的子标签)
  • remove(): 移除 (自杀)
  • 代码实现：
<script type="text/javascript">
        $(document).ready(function () {
            //1.清空ul
            //$("#city").empty();
            //2.移除ul
            $("#city").remove();

        });
    </script>

4.2 jQuery对DOM树中的属性进行操作

4.2.1 语法

  • attr(): 设置/获取元素的属性

  • 设置属性（给标签添加属性）

    1. 设置单个属性

  • jq对象.attr({“属性名”,“值”});

    1. 设置多个属性
      jq对象.attr({
      “属性”：“值”
      “属性”：“值”
      });
    1. 获取属性的值

jq对象.attr(“属性名”)；

    1. 移除属性（删除属性）

jq对象.removeAttr(“属性名”)；

  • prop(): 使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
    checked 和 selected 使用prop获取

4.3 jQuery对class进行操作

4.3.1 class操作

  • 元素.addClass(“属性值”)；添加
  • 元素.removeClass();移除指定样式
  • 元素.toggleClass(“属性值”)；有class属性就删除，没有则删除。

4.3.2 css样式

  • 设置css样式：

    1. 格式一：设置单个属性
  •   		 jq对象.attr({"属性名","值"});
    1. 格式二：设置多个属性
  •  	 jq对象.attr({
 		"属性"："值"
 		"属性"："值"
     });
    1. 获取css样式的值
  •  			jq对象.css("属性名称");

  • 获取元素的宽和高：

  •   	 jq对象.width()

  •   	 jq对象.height()

  • 案例实现：

 <style type="text/css">
        .textClass {
            background-color: #ff0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //获取对象
            var $user = $("input[name=\"username\"]");
            //1给username添加title属性
            $user.attr("title", "这是用户名输入框。。。");
            //2获取username的title属性
            //alert($user.attr("title"))
            //3给username添加value和class属性
            $user.attr({
                "value": "saber",
                "class": "textclass"
            });
            //4删除username的class属性
            $user.removeAttr("class");
            //5给username添加一个名为textClass的样式
            $user.addClass("textClass");
            //6删除username的名为textClass的样式
            $user.removeClass();
            $user.toggleClass("textClass");
            $user.toggleClass("textClass");

        });
    </script>

五、 案例一：隔行换色

  • 代码实现：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .odd {
            background-color: #BCD68D;
        }

        .even {
            background-color: #FFFFCC;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //编写页面加载成功事件
        $(function () {
            //获取所有的tr属性值
            // var $tr=$("tr");
            $("tr:gt(0):even").css("background-color", "#BCD68D")
            $("tr:gt(0):odd").css("background-color", "#FFFFCC")
        });
    </script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">

    <tr style="background-color: #999999;">
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

结果图

六、案例二：全选全不选

  • 代码实现：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //获取头部复选框的状态,并添加点击事件
        $("#selectAll").click(function () {

            //var flag = $("#selectAll").prop("checked");
            var falg = $(this).prop("checked");
            //获取其他复选框，并设置状态
            $(".itemSelect").prop("checked", falg);
        });
    })

</script>

<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
    </tr>
    <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td>
            <a href="">修改</a>|
            <a href="">删除</a>
        </td>
    </tr>
</table>
</body>

</html>

全选全不选

七、 案例三：QQ表情的选择

  • 代码实现：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>QQ表情选择</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .emoji {
            margin: 50px;
        }

        ul {
            overflow: hidden;
        }

        li {
            float: left;
            width: 48px;
            height: 48px;
            cursor: pointer;
        }

        .emoji img {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //1.页面加载成功后，给图片添加点击事件
            $("ul>li>img").click(function () {
                // $(".word").append($("").clone());
                //克隆当前标签对象
                $(".word").append($(this).clone());

            });
        })
    </script>
</head>
<body>
<div class="emoji">
    <ul>
        <li><img src="../img/01.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/02.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/03.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/04.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/05.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/06.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/07.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/08.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/09.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/10.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/11.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/12.gif" height="22" width="22" alt=""/></li>
    </ul>
    <p class="word">
        <strong>请发言：</strong>
        <img src="../img/12.gif" height="22" width="22" alt=""/>
    </p>
</div>
</body>
</html>

QQ表情的选择

猜你喜欢

转载自blog.csdn.net/qq_33852347/article/details/84260197
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022