jQuery-The write less,do more,jacascript library

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

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

  1.     <script>
  2.         // js对象转换为jq对象
  3.         var v=document.getElementById("div1");//js对象
  4.         var $jqv=$(v);//jq对象。变量名字前边加$是为了标明是jq对象
  5.  
  6.         //jq对象->js对象
  7.         var $jqv=$("#div1"); //类选择器获得jq对象
  8.         var jsv=$jqv.get(0);//第一种方法
  9.         // var jsv=$jqv[0];//第二张方法
  10.     </script>

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

  1.     <script>
  2.         // 1.元素选择器
  3.         $("#div1") //id为div1的元素
  4.         $(".group")//class为group的元素组合
  5.         $("p")//所有<p>元素
  6.         $("p.group")//id为group的<p>元素
  7.         // 2.css选择器
  8.         $("p").css("background-color","red"); //设置css样式
  9.         // 3.属性选择器
  10.         $("[href]") //选取带有href属性的元素
  11.         $("[href='#']")
  12.         $("[href!='#']")
  13.         $("[href$='.png']") //选取href属性以png结尾的元素
  14.         // 4.层级选择器
  15.         $("p > span")  // 子元素选择器: $(“选择器1” > “选择器2”) 选取p的子标签中为span的标签
  16.         $("p span") // 子孙选择器: $(“选择器1” (空格) “选择器2”)选取p的子孙标签中为span的标签
  17.         $("p + span")// 兄弟选择器（同级选择）: $(“选择器1” + “选择器2”) 选取p后边的第一个为span的标签
  18.         $("p ~ span"") // 所有兄弟选择器（同级选择）: $(“选择器1” ～“选择器2”) 选取p后边的所有为span的标签
  19.         // 5.表单选择器
  20.         $(":input")//获取input元素
  21.         $(":text") //type类型为text的元素 下同
  22.         $(":password")
  23.         $(":file")
  24.         // 6.基本过滤选择器
  25.         $("p:first")//选取页面第一个first元素
  26.         $("p:last")
  27.         $("p:last")
  28.         $("p:not(.group)") //p的类不是group的元素
  29.         $("p:even") //选取索引是偶数的元素(从0开始，下同)
  30.         $("p:odd")
  31.         $("p:eq(index)") //索引为index的元素
  32.         $("p:gt(index)") //索引大于index的元素
  33.         $("p:lt(index)") //索引小于index的元素
  34.  
  35.         $(":animated")//选取正在执行动画的元素
  36.         $("input:focus") //输入获得焦点的元素
  37.         $("option:selected") //被选择的元素
  38.         //7.内容过滤器
  39.         $("div:contains('获取div中含有该内容的元素')")
  40.         $("div:empty") //div中空的元素
  41.         $("div:has(#div1)")//div内id为div1的元素
  42.     </script>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.     <script>
  8.         var allcities=[
  9.             ["济南市","青岛市","滨州市"],
  10.             ["贵林","六盘水","毕节"],
  11.             ["石家庄","秦皇岛","保定"],
  12.         ]
  13.         $(function () {
  14.             // 绑定change时间，一改变就触发这个函数
  15.             $("#provinces").change(function(){
  16.                 var cities=allcities[this.value];
  17.                 //首先清空之前的城市内容
  18.                 $("#cities").empty();
  19.                 //遍历数组。依次添加到select中。i为下标值，n为内容
  20.                 $(cities).each(function(i,n){
  21.                     $("#cities").append("<option>"+n+"</option>");
  22.                 })
  23.             })
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28. <div>
  29.     <label>省份</label>
  30.     <select  id="provinces" >
  31.         <option value="-1">--请选择</option>
  32.         <option value="0">山东省</option>
  33.         <option value="1">贵州省</option>
  34.         <option value="2">辽宁省</option>
  35.     </select>
  36.     <select id="cities">
  37.  
  38.     </select>
  39. </div>
  40. </div>
  41. </body>
  42. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格的全选操作and表格的隔行换色操作</title>
  6.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.     <script>
  8.         $(function(){
  9.             $("#topcheck").click(function(){
  10.                 // topcheck 点击后，将otherchecks checked属性设置为this.checked
  11.                 $(".otherchecks").prop("checked",this.checked);
  12.             })
  13.             // 页面加载完成后，改变表格的颜色
  14.             $("#table1 tr:even:gt(0)").css("background-color","yellow");
  15.             $("#table1 tr:odd").css("background-color","wheat");
  16.         })
  17.     </script>
  18. </head>
  19. <body >
  20. <table border="2" id="table1" >
  21.     <tr>
  22.         <td><input type="checkbox" id="topcheck" ></td>
  23.         <td>商品名称</td>
  24.         <td>商品种类</td>
  25.     </tr>
  26.     <tr>
  27.         <td><input type="checkbox"  class="otherchecks"></td>
  28.         <td>华为p30</td>
  29.         <td>手机</td>
  30.     </tr>
  31.     <tr>
  32.         <td><input type="checkbox"  class="otherchecks"></td>
  33.         <td>macbookpro</td>
  34.         <td>电脑</td>
  35.     </tr>
  36.     <tr>
  37.         <td><input type="checkbox" class="otherchecks"></td>
  38.         <td>AppleTv</td>
  39.         <td>电视</td>
  40.     </tr>
  41.     <tr>
  42.         <td><input type="checkbox"  class="otherchecks"></td>
  43.         <td>iphoneX</td>
  44.         <td>手机</td>
  45.     </tr>
  46.     <tr>
  47.         <td><input type="checkbox"  class="otherchecks"></td>
  48.         <td>sony1000XM3</td>
  49.         <td>耳机</td>
  50.     </tr>
  51.     <tr>
  52.         <td><input type="checkbox"  class="otherchecks"></td>
  53.         <td>kindle</td>
  54.         <td>电子书</td>
  55.     </tr>
  56. </table>
  57. </body>
  58. </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. MCMC算法解析

    MCMC算法的核心思想是我们已知一个概率密度函数,需要从这个概率分布中采样,来分析这个分布的一些统计特性,然而这个这个函数非常之复杂,怎么去采样?这时,就可以借助MCMC的思想. 它与变分自编码不同在 ...

  2. dp回文

    .dp回文子串 通常在dp数组中存放的是 从i到j是否是回文子串 1.动态规划 2.中心扩展法 #include<iostream> #include<algorithm> # ...

  3. IFE第一天

    我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...

  4. Oracle查询所有表的字段明细

    SELECT USER_TAB_COLS.TABLE_NAME as 表名, UTC.COMMENTS as 表中文名, USER_TAB_COLS.COLUMN_ID as 列序号, USER_TA ...

  5. python学习日记（模块导入）

    什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(.p ...

  6. 【一本通1329：【例8.2】细胞&&洛谷P1451 求细胞数量】

    1329:[例8.2]细胞 [题目描述] 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.如: 阵列 4 10 023 ...

  7. Educational Codeforces Round 63 (Rated for Div. 2)

    传送门 A. Reverse a Substring 题意: 给你一串 s,让你判断能否通过反转区间[l,r]的元素,使得反转后的串的字典序小于 s: 如果能,输出 "YES",并 ...

  8. laravel windows安装

    第一步安装composer 下载地址:https://getcomposer.org/ 第二步:更改laravel下载地址 选项一.全局配置(推荐) $ composer config -g repo ...

  9. gzy的摄影梦

    好像当身高180的摄影师啊. 记录一下素材,等自己有相机了,就一一实现. 竟然有人在看哎. 一袭红衣的女子,将手伸出窗外,开心的看这漫天大雪. 今天的晚霞,近处是蓝色,颜色逐渐变淡,一直延伸到远处.( ...

  10. 使用cert-manager实现Ingress https

    什么是https 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报 ...