欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

【jQuery】jQuery基础

程序员文章站 2023-02-24 12:15:08
jQuery介绍 jQuery是一个轻量级JS库，使用十分简单； jQuery的核心是选择器，用于获取页面元素； jQuery提供了大量高效的方法，开发速度大幅提升； jQuery选择器 jQuery选择器用于选中需要操作的页面元素 语法1：jQuery(选择器表达式) 语法2：$(选择器表达式) ......

jquery介绍

jquery是一个轻量级js库，使用十分简单；

jquery的核心是选择器，用于获取页面元素；

jquery提供了大量高效的方法，开发速度大幅提升；

jquery选择器

  • jquery选择器用于选中需要操作的页面元素
  • 语法1：jquery(选择器表达式)
  • 语法2：$(选择器表达式)
基本选择器
语法 说明
$("#id") id选择器，指定id元素的对象
$("标签") 元素选择器，选择指定标签名的选择器
$(".class") 类选择器，选中拥有指定css类的元素
$("s1,s2,sn") 组合选择器，对元素进行组合
层叠选择器
语法 说明
$("ancestor descendant") 后代选择器
$("ancestor>descendant") 子选择器
$("prev~siblings") 兄弟选择器
属性选择器
语法 说明
$("selector[attribute=value]") 选中属性值等于具体值的组件
$("selector[attribute^=value]") 选中属性值以某值开头的组件
$("selector[attribute$=value]") 选中属性值以某值结尾的组件
$("selector[attribute*=value]") 选中属性值包含某值的组件
位置选择器(不常用)
语法 说明
$("selector:first") 获取第一个元素
$("selector:last") 获取最后一个元素
$("selector:even") 获取偶数位置的元素(从0开始)
$("selector:odd") 获取奇数位置的元素(从0开始)
$("selector:eq(n)") 获取指定位置的元素(从0开始)
表单选择器(不常用)
语法 说明
$("selector:input") 所有输入元素
$("selector:text") 获取文本框
$("selector:password") 获取密码框
$("selector:submit") 获取提交按钮
$("selector:reset") 获取重置按钮
...

操作元素属性

  • attr(name|properties|key) - 获取或设置元素属性
    $("a[href*='163']").attr("href", "http://www.163.com");将网易邮箱地址改为网易主页地址
  • removeattr(name) - 移除元素属性
    $("a").removeattr("href");将所有a标签的href属性移除

操作元素的css样式

  • css() - 获取或设置匹配元素的样式属性
    $("a").css("color", "red");将所有a标签的color样式设置为red
    $("a").css({"color":"red","font-weight":"bold"});传入json对象一次设置多个属性值
  • addclass() - 为每个匹配的元素添加指定的类名
    $("li").addclass("highlight myclass");为li标签增加两个css类
  • removeclass() - 从所有匹配的元素中删除全部或者指定的类
    $("p").removeclass("myclass");移除p标签的myclass类

设置元素内容

  • val() - 获取或设置输入项的值
    $("input[name='username']").val();获取文本框的值
    $("input[name='username']").val("请输入姓名");设置文本框的值
  • text() - 获取或设置元素的纯文本
    $("span").text("<b>你好啊！</b>");将span中的内容设置为<b>你好啊</b>(文本中的html标签进行转义)
  • html() - 获取或设置元素内部的html
    $("span").html("<b>你好啊！</b>");将span中的内容设置为你好啊！(文本中的html标签不进行转义)

jquery事件处理方法

  • on("click", function) - 为选中的页面元素绑定单击事件
  • click(function) - 是绑定事件的简写形式
  • 处理方法中提供了event参数包含了事件的相关信息
jquery常用事件
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
mouseover

实例

<!doctype html >

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery练习</title>

<style type="text/css">
.div1 {
    float: left;
    width: 50px;
    line-height: 30px;
    background-color: lightgray;
    margin-left: 10px;
    text-align: center;
    vertical-align: middle;
}

.div2 {
    width: 300px;
    height: 300px;
    border: solid gray 1px;
    margin-top: 60px;
    color: red;
}
</style>


</head>
<body>
    <h2>请选择背景颜色</h2>
    <div>
        <div id="blue" class="div1">蓝色</div>
        <div id="green" class="div1">绿色</div>
    </div>
    <div class="div2" id="bg"></div>
    <div>
        输入颜色首字母： <input type="text" name="color">
    </div>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        alert("欢迎来到设置颜色的页面");
        $("#blue").click(function(){
            $("#bg").css("background-color", "blue");
            $("#bg").text("蓝色背景");
        });
        $("#green").click(function(){
            $("#bg").css({"background-color":"green","font-weight":"bold"});
            $("#bg").text("绿色背景");
        });
        $("input[type='text']").keypress(function(event){
            if(event.keycode == 66){
                $("#bg").css("background-color", "blue");
                $("#bg").text("");
            }
            if(event.keycode == 71){
                $("#bg").css("background-color","green");
                $("#bg").text("");
            }
        });
    </script>
</body>
</html>

上一篇： js变量的作用域、变量的提升、函数的提升

下一篇： js 监控iframe URL的变化实例代码

推荐阅读