JavaScript--jQuery(上)

最新推荐文章于 2024-10-02 05:39:15 发布

长得丑就要多读书

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量607

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_40523659/article/details/121283381

版权

1.运动的套路

在前端中经常会出现元素运动的效果，实现的原理是定时器+改变定位元素left、top。

<script type="text/javascript">
    var div = document.querySelector('div');
    var l = 0;
    //开启定时器
    setInterval(function(){
        l+=10;
        div.style.left = l+"px";//使图片水平运动
    },50);
</script>

2.jQuery简介

概述：jQuery是一个快速、简洁的JavaScript框架。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口：具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+等。

以上内容来自于百度百科。

3.引包

JS代码可以书写在JS文件里面，但JS文件内的代码不能独立运行。这是因为JS是脚本语言必须要嵌套在静态页面中才能运行。使用jQuery之前必须要引包！！！

引包：在静态页面中引入JS文件，让静态页面提供执行环境。

引包代码：

<script type="text/javascript" src="./demo1.js"></script>

4.jQuery基本使用

①jQuery框架本质上是封装好的JavaScript函数库，简称JQ。

JQ下载地址：jquery下载所有版本（实时更新）

②$函数是jQuery函数库的核心函数，可以用来匹配节点树上的标签。jQuery函数库支持全部选择器：*{通配选择器}、标签选择器、类选择器、id选择器等。

<body>
    <ol>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>烫头</li>
    </ol>
    <p class="cur">这是一个段落</p>
</body>
</html>
<script type="text/javascript" src="./jQuery-3.5.1.min.js"></script>
<script type="text/javascript">
    //链式语法，连续打点，从左到右执行
    $('li').css('color','red');//标签选择器
    $('.cur').css('background','cyan');//类选择器
</script>

5. jQuery独有的选择器

①:first或:last

可以获取匹配节点的第一个元素或最后一个元素。

<script type="text/javascript" src="./jQuery-3.5.1.min.js"></script>
<script type="text/javascript">
    $("li:first").css("color","red");
    $("ul li:last").css("color","pink");
</script>

②:odd或:even

可以匹配元素奇数索引值、偶数索引值节点。

<script type="text/javascript">
    $("li:odd").css("color","green");
    $("li:even").css("color","red");
</script>

③:gt(index)与:lt(index)

可以匹配大于某一个索引值或小于某一个索引值的节点。

④:eq(index)

匹配某准确索引值的节点。

jQuery其他选择器详见下面链接：

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

6.css方法

css方法是JQ框架提供的，主要作用是可以设置匹配节点的行内样式。

$("div").css("color","red");

上例中，css函数有两个参数，第一个参数是匹配节点要添加样式的名字；第二个参数是匹配节点添加样式的属性值。但是这种写法有缺陷，因为每次只能添加一个样式。

可以同时添加多个样式的写法：

<script type="text/javascript">
    $("div").css({
        color:"red",
        background: "cyan",
        fontSize: 30
    });
</script>

即传递的是JOSN数据格式，而且属性值可以省略px单位。但是中间带有-的样式，要改为驼峰写法。

7.attr方法

attr方法是JQ框架提供的方法，作用是获取或设置节点的属性。

<body>
    <input type="text"/>
    <input type="radio"/>
    <input type="checkbox"/>
</body>
</html>
<script type="text/javascript">
    console.log($("input:eq(1)").attr("type"));//获取属性值 radio
    $("input:eq(2)").attr("type","text");//修改属性值
</script>

8.操作节点文本的方法

操作非表单元素文本：html方法

操作表单元素文本：val方法

<script type="text/javascript">
    console.log($("input").val());//获取表单元素文本
    $("input").val("账号");//修改表单元素文本
    $("div").html("嘿嘿");//修改非表单元素的文本
</script>