jQuery笔记

最新推荐文章于 2023-04-08 20:28:53 发布
最新推荐文章于 2023-04-08 20:28:53 发布
阅读量705 收藏 1
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pashudeanan/article/details/51922951
版权

JS

1、  寻找HTML样式

x=document.getElementById("demo") //找到元素 
x.style.color="#ff0000";          //改变样式

demo:

<p id="demo">

JavaScript 能改变 HTML 元素的内容。

</p>

 

<script>

function myFunction()

{

x=document.getElementById("demo");  // 找到元素

x.innerHTML="Hello JavaScript!";    // 改变内容

}

</script>

 

<button type="button"οnclick="myFunction()">点击这里</button>

2、  简单弹出框

alert("不是数字");

3、  引入外部的JavaScript

<script src=”myScript.js”></script>

4、  显示数据

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

5、  带返回值的函数

function myFunction()
{
var x=5;
return x;
}

6、  === 为绝对相等，即数据类型与值都必须相等；!==为绝对不等于（值或类型不相等）。

var x ="John";              
var y = new String("John");
(x === y) // 结果为 false，因为是字符串，y 是对象

7、  JS中有>=与<=

8、  对象的遍历xin person

varperson={fname:"John",lname:"Doe",age:25}; 

for (x in person)
  {
  txt=txt + person[x];
  }

while

cars=["BMW","Volvo","Saab","Ford"];

var i=0;

while(cars[i])

{

document.write(cars[i]+ "<br>");

i++;

}

9、  typeof 操作符来检测变量的数据类型

typeof"John"                // 返回 string

typeof3.14                  // 返回 number

typeoffalse                 // 返回 boolean

typeof[1,2,3,4]             // 返回 object

typeof {name:'John', age:34} // 返回 object

10、 constructor 属性返回所有 JavaScript 变量的构造函数

"John".constructor            //返回函数 String()  { [native code]}
(3.14).constructor            //返回函数 Number()  { [native code]}
false.constructor             //返回函数 Boolean() { [native code] }
[1,2,3,4].constructor         //返回函数 Array()   { [nativecode] }
{name:'John', age:34}.constructor//返回函数 Object() { [native code]}
new Date().constructor        // 返回函数 Date()    { [native code] }
function () {}.constructor   // 返回函数 Function(){ [native code] }

可以使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):

实例：

function isArray(myArray) {

   return myArray.constructor.toString().indexOf("Array") >-1;

}

可以使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

实例

function isDate(myDate) {

    returnmyDate.constructor.toString().indexOf("Date") > -1;

}

11、JavaScript 变量提升，但初始化不会提升

的

 

12、浮点型数据使用注意事项

var x =0.1;

var y =0.2;

var z = x+ y            // z 的结果为 0.3

if (z == 0.3)            // 返回 false

解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

13、代码规范

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。

14、typeof 操作符来检测变量的数据类型

15、通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

实例

varx=document.getElementById("main");

var y=x.getElementsByTagName("p");

16、通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

17、改变 HTML 样式

document.getElementById("p2").style.color="blue";

18、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理cookie。

<bodyοnlοad="checkCookies()"> 检查cookie是否可用

19、onchange 事件

nchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

<input type="text"id="fname" οnchange="upperCase()">

20、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至HTML 元素上方或移出元素时触发函数。

21、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

22、JavaScript HTML DOMEventListener

addEventListener()方法

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

 

实例

在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click",displayDate);

removeEventListener()方法

removeEventListener() 方法移除由addEventListener() 方法添加的事件句柄:

实例

element.removeEventListener("mousemove",myFunction);

23、创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

 实例

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

 

<script>

varpara=document.createElement("p");

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);

 

var element=document.getElementById("div1");

element.appendChild(para);

</script>

例子解析：

这段代码创建新的<p> 元素：

varpara=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

varelement=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

24、删除已有的 HTML 元素

以下代码演示了如何删除元素：

实例

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

varparent=document.getElementById("div1");

varchild=document.getElementById("p1");

parent.removeChild(child);

</script>

 

尝试一下 »

 

实例解析

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

找到 id="div1" 的元素：

varparent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

varchild=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

jQuery

1、文档就绪事件

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

 

   //jQuery methods go here...

 

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

2、元素选择器 $("p")

用户点击按钮后，所有 <p> 元素都隐藏：

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

3、#id 选择器 $("#test")

4、.class 选择器 $(".test")

5、this

$(document).ready(function(){

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

   $(this).hide();

  });

});

点一下消失一个p

6、其他选择器

语法

描述

$("*")

选取所有元素

$(this)

选取当前 HTML 元素

$("p.intro")

选取 class 为 intro 的 <p> 元素

$("p:first")

选取第一个 <p> 元素

$("ul li:first")

选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")

选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")

选取带有 href 属性的元素

$("a[target='_blank']")

选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']")

选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button")

选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")

选取偶数位置的 <tr> 元素

$("tr:odd")

选取奇数位置的 <tr> 元素

7、常用的 jQuery 事件方法

语法

描述

$(document).ready()

允许我们在文档完全加载完后执行函数

$("p").click(function(){}

当按钮点击事件被触发时会调用一个函数

dblclick()

双击元素时，会发生 dblclick 事件

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时

mouseup()

当在元素上松开鼠标按钮时

hover()

hover()方法用于模拟光标悬停事件

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur()

当元素失去焦点时，发生 blur 事件。

8、隐藏和显示

以使用 hide() 和 show() 方法来隐藏和显示 HTML元素

通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){
  $("p").toggle();
});

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

9、淡入淡出

$(selector).fadexx(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeIn() 用于淡入已隐藏的元素

实例

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()方法用于淡出可见元素, fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换,

jQueryfadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）. $(selector).fadeTo(speed,opacity,callback);

10、滑动、动画、通知动画、Callback、Chaining暂缺

jQuery AJAX

1、jQuery$.post() 方法

$.post()方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

实例

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

  $.post("demo_test_post.html",

  {

    name:"Donald Duck",

    city:"Duckburg"

  },

  function(data,status){

    alert("Data: " + data +"nStatus: " + status);

  });

});

提示： 这个 PHP 文件 ("demo_test_post.php") 类似这样：

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';
echo 'Dear ' . $name;
echo 'Hope you live well in ' . $city;
?>

 

jQuery JSON

JSONP 应用

1. 服务端JSONP格式数据

如客户想访问 :http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为:callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JSONP 实例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function callbackFunction(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

jQuery使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html>
<html>
<head>
         <title>JSONP 实例</title>
         <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>      
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
         
         var html = '<ul>';
         for(var i = 0; i < data.length; i++)
         {
                 html += '<li>' + data[i] + '</li>';
         }
         html += '</ul>';
         
         $('#divCustomers').html(html); 
});
</script>
</body>
</html>

 

 

打酱油的张起灵
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery笔记
01-24
jquery笔记，多年前端开发积累。
jQuery框架漏洞全总结及开发建议
热门推荐
iokla
10-02 1万+
一、jQuery简介 jQuery是一个快速、简洁的JavaScript框架,是一个丰富的JavaScript代码库。jQuery设计的目的是为了写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 据一项调查报告，在对433,000个网站的分析中发现，77％的网站至少使用了一个具有已知安全漏洞的前端JavaScript库，而jQuery位列榜首，而且远远超过其他库。但事实上这些库有可用的不
htmlspecialchars() 函数的用法及过滤XSS的问题
滴水石穿
08-31 5837
htmlspecialchars()函数的功能如下： htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。 预定义的字符是： & （和号）成为 & " （双引号）成为 " ' （单引号）成为 ' < （小于）成为 < > （大于）成为 > 它的语法如下： htmlspecialchars(string,flags,char...
JAVA_Web - 【JavaScript】函数与事件
⚡
04-15 229
目录 函数声明方式 一般函数 匿名函数 函数参数与返回值 全局函数 编码解码 事件 事件源 事件 响应行为 事件绑定的三种方式 阻止默认事件与事件传播 <一> 函数声明方式 一般方式 function fn(){ //... } 匿名方式 function(){ //... } <二> 函数参数与返回值 ...
javascript 获取元素
tingna_ye的专栏
03-25 591
HTML DOM  javascript 获取元素方法：       1.   通过元素id获取；                var x=document.getElementByID(" element id" );       2.  通过元素标签名获取；             var x=document.getElementByID(" element id");
js基础2
LALA__ddd的博客
07-12 259
鼠标移上去换图片 js代码： function testE(){ var a=document.getElementById("p2"); a.src="7.jpg"; } function testF(){ var a=document.getElementById("p2"); a.src="2.jpg"; } html代码： 鼠标点击不放开变图片 j
JQuery笔记
01-09
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
JS轮播图代码
longjunx的博客
04-08 401
/获取点击超链接的索引,并将其设置为index。//遍历所有的A,并将它们的背景颜色设置为红色。//为每一个超链接都添加number属性。//使用move函数切换图片。* -点击第一个超链接,跳转到第一个。* -点击第二个超链接,跳转到第二个。/* 每向左移动520 就会显示下一张 *///为超链接绑定单击响应函数。//为所有的超链接绑定单击响应函数。//设置navDiv的left值。//创建一个方法用来设置选中的a。--创建一个ul，用来防止图片-->--创建一个大的div,作为大的容器-->
2-javascript:：笔记
weixin_30878501的博客
06-11 60
0.位置： HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 1.写自己的函数; 2.document的相关函数： document.getElementById() document.getElementsByClassName() d...
几种常见的js表单验证
qwertlijia的专栏
02-12 844
几种常见的js表单验证 以下是HTML代码：   无标题文档      function cancel(){        document.getElementById("Form").reset();    }    function check(){    //验证用户名    var username = document.ge
javascript的html编码函数 (htmlspecialchars-处理特殊字符)
jsczxy2
02-18 925
function htmlspecialchars(str) { str = str.replace(/&amp;/g, '&amp;amp;'); str = str.replace(/&lt;/g, '&amp;lt;'); str = str.replace(/&gt;/g, '&amp;gt;'); str = str.replace(...
jquery与php的HTML转义与反转义
aituochang1886的博客
04-10 367
1.jquery （1）Html转义 var tmp = '<a href="https://www.baidu.com/">连接</a>'; var tmp_rev = $('<div>').text(tmp).html(); console.log(tmp_rev); 结果： 　　&lt;a hr...
jquery实现html转义 反转义
SA
04-16 3881
参考来源： https://www.cnblogs.com/woostundy/p/4138173.html 实现方式： $('<div>').text('<a>').html() 结果：&lt;a&gt; $('<div>').html('&lt;a&gt;').text() 结果：<a> <...
PHP字符转义部分小结
02-19 479
与PHP字符串转义相关的配置和函数如下：  1.magic_quotes_runtime  2.magic_quotes_gpc  3.addslashes()和stripslashes()  4.mysql_escape_string()  5.addcslashes()和stripcslashes()  6.htmlentities() 和html_entity_decode()
htmlspecialchars详解
天天学安全专属博客
03-23 5867
1.首先看下面的代码 <?php $str = "This is <br> text"; echo htmlspecialchars($str); ?> 你运行一下会发现显示完全正确，显示为： This is <br> text 你查看源代码会发现： This is &lt;br&gt; text htmlspecialchars（）的作用就是显示完全正确，但是源码改变，具体改变规则如下： '&amp
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值