jQuery-The write less,do more,jacascript library

非常方便的js库，封装了许多有用的功能。

1.jq与js对象之间的转换

    <script>

        // js对象转换为jq对象

        var v=document.getElementById("div1");//js对象

        var $jqv=$(v);//jq对象。变量名字前边加$是为了标明是jq对象

        //jq对象->js对象

        var $jqv=$("#div1"); //类选择器获得jq对象

        var jsv=$jqv.get(0);//第一种方法

        // var jsv=$jqv[0];//第二张方法

    </script>

2.jq的选择器（列举了几个最常用的，可看jQuerry参考手册）

    <script>

        // 1.元素选择器

        $("#div1") //id为div1的元素

        $(".group")//class为group的元素组合

        $("p")//所有<p>元素

        $("p.group")//id为group的<p>元素

        // 2.css选择器

        $("p").css("background-color","red"); //设置css样式

        // 3.属性选择器

        $("[href]") //选取带有href属性的元素

        $("[href='#']")

        $("[href!='#']")

        $("[href$='.png']") //选取href属性以png结尾的元素

        // 4.层级选择器

        $("p > span")  // 子元素选择器: $(“选择器1” > “选择器2”) 选取p的子标签中为span的标签

        $("p span") // 子孙选择器: $(“选择器1” (空格) “选择器2”)选取p的子孙标签中为span的标签

        $("p + span")// 兄弟选择器（同级选择）: $(“选择器1” + “选择器2”) 选取p后边的第一个为span的标签

        $("p ~ span"") // 所有兄弟选择器（同级选择）: $(“选择器1” ～“选择器2”) 选取p后边的所有为span的标签

        // 5.表单选择器

        $(":input")//获取input元素

        $(":text") //type类型为text的元素 下同

        $(":password")

        $(":file")

        // 6.基本过滤选择器

        $("p:first")//选取页面第一个first元素

        $("p:last")

        $("p:last")

        $("p:not(.group)") //p的类不是group的元素

        $("p:even") //选取索引是偶数的元素(从0开始，下同)

        $("p:odd")

        $("p:eq(index)") //索引为index的元素

        $("p:gt(index)") //索引大于index的元素

        $("p:lt(index)") //索引小于index的元素

        $(":animated")//选取正在执行动画的元素

        $("input:focus") //输入获得焦点的元素

        $("option:selected") //被选择的元素

        //7.内容过滤器

        $("div:contains('获取div中含有该内容的元素')")

        $("div:empty") //div中空的元素

        $("div:has(#div1)")//div内id为div1的元素

    </script>

3.省市联动--jq的遍历&添加子节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script>

        var allcities=[

            ["济南市","青岛市","滨州市"],

            ["贵林","六盘水","毕节"],

            ["石家庄","秦皇岛","保定"],

        ]

        $(function () {

            // 绑定change时间，一改变就触发这个函数

            $("#provinces").change(function(){

                var cities=allcities[this.value];

                //首先清空之前的城市内容

                $("#cities").empty();

                //遍历数组。依次添加到select中。i为下标值，n为内容

                $(cities).each(function(i,n){

                    $("#cities").append("<option>"+n+"</option>");

                })

            })

        })

    </script>

</head>

<body>

<div>

    <label>省份</label>

    <select  id="provinces" >

        <option value="-1">--请选择</option>

        <option value="0">山东省</option>

        <option value="1">贵州省</option>

        <option value="2">辽宁省</option>

    </select>

    <select id="cities">

    </select>

</div>

</div>

</body>

</html>

4.表格的全选操作和隔行换色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格的全选操作and表格的隔行换色操作</title>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script>

        $(function(){

            $("#topcheck").click(function(){

                // topcheck 点击后，将otherchecks checked属性设置为this.checked

                $(".otherchecks").prop("checked",this.checked);

            })

            // 页面加载完成后，改变表格的颜色

            $("#table1 tr:even:gt(0)").css("background-color","yellow");

            $("#table1 tr:odd").css("background-color","wheat");

        })

    </script>

</head>

<body >

<table border="2" id="table1" >

    <tr>

        <td><input type="checkbox" id="topcheck" ></td>

        <td>商品名称</td>

        <td>商品种类</td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="otherchecks"></td>

        <td>华为p30</td>

        <td>手机</td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="otherchecks"></td>

        <td>macbookpro</td>

        <td>电脑</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="otherchecks"></td>

        <td>AppleTv</td>

        <td>电视</td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="otherchecks"></td>

        <td>iphoneX</td>

        <td>手机</td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="otherchecks"></td>

        <td>sony1000XM3</td>

        <td>耳机</td>

    </tr>

    <tr>

        <td><input type="checkbox"  class="otherchecks"></td>

        <td>kindle</td>

        <td>电子书</td>

    </tr>

</table>

</body>

</html>

Web前端-关于jQuerry的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

随机推荐

  1. Allow Only Ajax Requests For An Action In ASP.NET Core

    ASP.NET Core offers attributes such as [HttpGet] and [HttpPost] that allow you to restrict the HTTP ...

  2. vs code 的便捷使用

    鼠标滚动 改变字体大小 打开编辑器设置,搜索 editor.mouseWheelZoom  或者文本设置 自动保存 打开设置 搜索  autosave

  3. sql语句基础

    数据库库(DataBase):就是一个存储数据的仓库.为了方便数据的存储和管理,它将数据按照特定的规律存储在磁盘上.通过数据库管理系统,可以有效的组织和管理存储在数据库中的数据.SQL(Structu ...

  4. 【BZOJ4007】[JLOI2015]战争调度（动态规划）

    [BZOJ4007][JLOI2015]战争调度(动态规划) 题面 BZOJ 洛谷 题解 神仙题,我是做不来. 一个想法是设\(f[i][j]\)表示当前考虑到\(i\)节点,其子树内有\(j\)个人 ...

  5. 牛客网 272B Xor Path（树上操作）

    题目链接:Xor Path 题意:每个顶点的点权为Ai,任意两点路径上点权异或和为Path(i,j),求所有Path(i,j)和. 题解:考虑每个顶点被用到的次数,分以下三种情况: 1.本身和其他顶点 ...

  6. python爬虫学习笔记

    爬虫的分类 1.通用爬虫:通用爬虫是搜索引擎(Baidu.Google.Yahoo等)“抓取系统”的重要组成部分.主要目的是将互联网上的网页下载到本地,形成一个互联网内容的镜像备份. 简单来讲就是尽可 ...

  7. python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）

    python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...

  8. Mac新手入门使用教程 - Finder 技巧

    1,了解MAC电脑桌面.   Finder:中间DOCK栏下最左边蓝白相间的图标. DOCK栏:包括Finder.前往应用程序.创建所有应用程序的快捷方式(google浏览器等).系统偏好设置.堆栈. ...

  9. Java虚拟机—垃圾收集器（整理版）

    1.概述 如果说收集算法是内存回收的方法论,那么垃圾收集器就是内存回收的具体实现.Java虚拟机规范中对垃圾收集器应该如何实现并没有规定,因此不同的厂商.不同版本的虚拟机所提供的垃圾收集器都可能会有很 ...

  10. vs 开发 win32 程序，调出控制台窗口，方便调试

    设置方法 项目 -> 属性 -> 生成事件 ->后期生成事件 -> 命令行 中添加 editbin /SUBSYSTEM:CONSOLE $(OutDir)\$(Project ...