zoukankan      html  css  js  c++  java
  • jquery入门(1)

    1.jQuery简介

    jQuery是一个快速、简洁的JavaScript框架,倡导写更少的代码,做更多的事情

    jquery官方网站

    jquery中文文档

    1.1.简单函数封装

    根据id、类名称来获取元素

    function $(selector){
        var str = selector.charAt(0)
        if(str === "#"){
            return document.getElementById(selector.substr(1))
        }else if (str === "."){
            return document.getElementsByClassName(selector.substr(1))
        }
    }
    

    1.2.jquery的使用

    初始化项目

    npm init -y
    

    安装jquery

    npm install jquery@2.1.14 --save
    

    引入jquery

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
    </head>
    <body>
    <div id="box">111</div>
    <div class="box1"></div>
    <script>
        console.log($("#box"))
    </script>
    </body>
    </html>
    

    总结:jquery本质上就是一个使用javascript封装的一个工具库,可以是你写代码的时候更简洁高效,学习建议:记住并熟练应用jquery的各种方法、各种选择器就可以了

    2.jQuery选择器

    2.1 基本选择器

    id选择器

    $("#box").html()  // 用 #号
    

    类选择器

    $(".box").html   //用 . 号
    

    标签选择器

    $("div").html   //直接给标签名
    

    多元素选择器

    $("#box,.box,div").html();  // 几种选择器组合
    

    后代选择器

    $("#box p").html()  // 用空格隔开
    

    子元素选择器

    $("#box > p").html() ; // 用> 隔开
    

    2.2 其他选择器

    属性选择器

    $("input[value=men]") ; //找 value=men的input元素
    $("input[value*=men]") ; //找 value里面包含men的input元素
    $("input[value^=men]") ; //找 value里面以men开头的input元素
    $("input[value$=men]") ; //找 value里面以men结尾的input元素
    

    简单过滤

    :first
    用法: $(”tr:first”) ; 匹配找到的第一个元素
    :last 
    匹配找到的最后一个元素
    :not(selector) 
    去除所有与给定选择器匹配的元素
    :even
    匹配所有索引值为偶数的元素,从 0 开始计数
    :odd
    匹配所有索引值为奇数的元素,从 0 开始计数
    :eq(index) 
    匹配一个给定索引值的元素,从 0 开始计数
    :gt(index) 
    匹配所有大于给定索引值的元素,从 0 开始计数
    :lt(index) 
    匹配所有小于给定索引值的元素,从 0 开始计数
    

    螺钉课堂视频课程地址:http://edu.nodeing.com

  • 相关阅读:
    Skyline软件SFS服务介绍
    选择三维地理信息系统(GIS)软件平台需要考虑的内容
    如何利用Skyline6.1的接口创建动态对象DynamicObject
    Skyline中的隐藏组
    基于Skyline的TerraExplorer6.1.1如何通过二次开发实现折线和多边形对象的手动绘制
    如何利用Skyline6.1实现多球对比功能
    Skyline for Android & iOS devices
    VBS、WKT、投影
    FME+Oracle Spatial+SFS+TEPro
    如何生成静态页
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/12033631.html
Copyright © 2011-2022 走看看