1、:before和:after，position: absolute;才可以调节高宽

2、判断背景颜色

$(this).css("background-color")=="rgb(95, 158, 160)" ，注加空格

$(this).css("background-color")==“red”是错误的

注意：一定要在background加的color，未改颜色之前是rgba(0, 0, 0, 0)

3、用Class，点击事件

    <div class="dic" name="div1"></div>

    <div class="dic" name="div4"></div>

    <div class="dic" name="div2"></div>

    <div class="dic" name="div3"></div>

    <script>

        $(".dic").click(function(){

            //注意一定要在background加的color，未改颜色之前是rgba(0, 0, 0, 0)

            if ($(this).css("background-color")=="rgb(95, 158, 160)") {

                $(this).css("background","red");

                alert($(this).attr("name"));    //用prop获取不到name

            } else{

                //对比字符串上加上了空格,弹出了true

//              alert($(".dic").css("background")) //对比

                $(this).css("background","cadetblue");

            }

        })

    </script>

4、获取父元素

//获取当前所有父元素的查找"td"的第一个的文本

$(this).parents().find("td").eq(0).text();

5、jQuery.data() 方法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

6、Java和JavaScript的初始数据的不同

var color;

alert(color)//显示的是undefined

String color；//这个显示的是null

注：建议用alert获取JavaScript的初始数据

7、JavaScript动态添加元素如果不设定它的顺序，它的顺序就随机出现

 //翡翠寓意

    setTimeout(function(){

        $.ajax({

            url:"ProductsSelect?action=Moral",

            type:"get",

            dataType:"json",

            success:function (data) {

                var $div="<div class='divproduer' style='margin-top: 23px;'>";

                for (var i=0;i<data.length;i++){

                    var obj=data[i];

​

                    $div+="<span style='margin-right: 15px; cursor:pointer;' class='sMoral'>"+obj.moral+"</span>";

                }

                $div+="</div>";

                $("#top-right").append($div);               //注：顺序是随机的

            },

            error:function (xhr,textStatus,errorThrown) {       //失败回调

                alert("错误，"+textStatus+","+errorThrown);

            }

        })

    }, 300);

8、select的name传值，

<select name="education">

　　<option value="高中">高中</option>
　　<option value="专科">专科</option>
　　<option value="本科">本科</option>
　　<option value="博士">博士</option>

</select>

9、form提交方式

这样不能将数据提交给后台

<input type="button" value="批量删除"/>

form表单中的传递方法有<button>和<input type="submit">两种，他们的功能是一样的
注：如果form没有写action属性的话，就只能在url后面加"?title=..."数据，只不过使用<button>可以显示"?title=..."，<input type="submit">不显示

10、获取子类数据

<body>

  <div>

    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>

​

    <p>And One Last Time</p>

  </div>

  <!--children:孩子们-->

<script>alert($("div").children(".selected").eq(0).text());</script>

</body>

11、jq获取相邻元素的上一个或下一个

相邻元素下一个

//只能获取下一个

$(this).next().val();

//获取全部下一个，这里指定元素

$(this).nextAll(".col-total").val();

相邻元素上一个

//只能获取上一个

$(this).prev().val();

//获取全部上一个，这里指定元素

$(this).prevAll(".col-total").val();

12、JavaScript的return 

retrun true； 返回正确的处理结果。

return false；返回错误的处理结果，终止处理。

return；把控制权返回给页面。

​

<a href="abc.htm" onclick="return add_onclick()">Open</a>

注：如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm；否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容.

13、form改变路径

 //改变form表路径

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

        $("#form1").prop("action","/jstl/queryGoods");

        $("#form1").submit();

    })

14、在页面里显示另外一个页面

<iframe src="页面的路径" width="97%" height="80%"></iframe>

15、排序和点击时切换方法

html:

<input type="button" @click="compare2" value="排序"/>

js：

var vm=new Vue({

        el:"#app4",

        data:{

            fruits:[{

                    'name': 'abc',

                    'age': 20

                },{

                    'name': 'cde',

                    'age': 19

                },{

                    'name': 'dfc',

                    'age': 25

                },{

                    'name': 'bde',

                    'age': 21

                }],

            biaoji:1//标记

        },

        methods:{

            compare:function (property) {

                //做标记，注这里可以使用this

                if (this.biaoji==1){

                    this.biaoji=2;

                } else {

                    this.biaoji=1;

                }

                return function (a, b) {

                    //判断是否等于1，注这里不能使用this，必须vm才行

                    var two;

                    if (vm.biaoji==1){

                        two=b[property] - a[property];

                    }else {

                        two=a[property] - b[property];

                    }

                    return two//排序

                }

            },

            compare2:function () {

                // alert(vm.fruits.age);

                vm.fruits.sort(vm.compare("age"))

            }

        }

    })

    //项目：vue2_01
 

JavaScript新手经常遇到的问题（一）的更多相关文章

  1. 我要成为前端工程师！给 JavaScript 新手的建议与学习资源整理

    来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...

  2. javascript新手实例1-DOM基本操作

    学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的 ...

  3. SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...

  4. JavaScript新手学习笔记1——数组

    今天,我复习了一下JavaScript的数组相关的知识,总结一下数组的API: 总共有11个API:按照学习的先后顺序来吧,分别是: ① toString()  语法:arr.toString(); ...

  5. JavaScript新手学习笔记3——三种排序方式（冒泡排序、插入排序、快速排序）

    每种编程语言学到数组的时候,都会讲到排序算法,当时学C语言的时候,卡在排序算法.今天来总结一下javascript中如何实现三种排序算法. 1.冒泡排序(默认升序排列哦) 原理: 冒泡排序的原理,顾名 ...

  6. Javascript新手集中营

        javascript是世界上最流行的编程语言,也许没有之一,看看github,stackoverflow上面的开源项目和问答就可略知一二.它可以用来开发web app.服务器.或者联合nati ...

  7. 【从无到有】JavaScript新手教程——1.简介、变量和运算符

    今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS).   一.JS的作用: 表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 二.[使用JS的 ...

  8. JavaScript新手学习笔记（一）

    1.JavaScript 对大小写敏感. JavaScript 对大小写是敏感的. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键. 函数 getElementById 与 getE ...

  9. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

随机推荐

  1. Angular开发规范

    目录  一.         前言 1.1.       规范目的 1.2.       局限性 二.         文件规范 2.1.       文件结构约定 2.2.       单一职责原则 ...

  2. js的ajax请求

    1 js原生get请求 <script> window.onload = function(){ var oBtn = document.getElementById('btn'); oB ...

  3. P2893 [USACO08FEB]修路

    直入主题. 农夫约翰想改造一条路,原来的路的每一段海拔是Ai,修理后是Bi花费|A_i–B_i|.我们要求修好的路是单调不升或者单调不降的.求最小花费. 数据范围:n<=2000,0≤ Ai ≤ ...

  4. 吐血推荐珍藏的Visual Studio Code插件

    作为一名Java工程师,由于工作需要,最近一个月一直在写NodeJS,这种经历可以说是一部辛酸史了.好在有神器Visual Studio Code陪伴,让我的这段经历没有更加困难.眼看这段经历要告一段 ...

  5. 201871010114-李岩松《面向对象程序设计（java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  6. ActiveMQ消息队列从入门到实践（1）—JMS的概念和JMS消息模型

    1. 面向消息的中间件 1.1 什么是MOM 面向消息的中间件,Message Oriented Middleware,简称MOM,中文简称消息中间件,利用高效可靠的消息传递机制进行平台无关的数据交流 ...

  7. Java 读取Word批注中的文本和图片

    本文将介绍读取Word批注的方法,包括读取Word批注中的文本及图片.关于操作Word批注的方法还可以参考这两篇文章:Java 添加.回复.修改.删除Word批注:Java 给Word指定字符串添加批 ...

  8. 图片转换成base64预览

    来源:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL 真心不错写得,思路比较清晰.已经测试过 注意: ...

  9. Apache Hudi 介绍与应用

    Apache Hudi Apache Hudi 在基于 HDFS/S3 数据存储之上,提供了两种流原语: 插入更新 增量拉取 一般来说,我们会将大量数据存储到HDFS/S3,新数据增量写入,而旧数据鲜 ...

  10. Python爬虫的开始——requests库建立请求

    接下来我将会用一段时间来更新python爬虫 网络爬虫大体可以分为三个步骤. 首先建立请求,爬取所需元素: 其次解析爬取信息,剔除无效数据: 最后将爬取信息进行保存: 今天就先来讲讲第一步,请求库re ...