jQuery常用的功能

2018-06-29 16:13:42 浏览数 (1)

一、目录:



1.ready(function(){})方法的使用

2.require最常用的方法:

3.display:none

4.visible:hidden

5.修改span的字体的颜色

6.window对象中self、 top 的区别

7.blur事件的使用

二.、内容:

1. ready(function(){})

```$(document).ready(function(){

// 当网页加载完成后执行这里的代码块

});```

2.require('http') 内置模块

```

require('./server')  “./”表示当前路径,后面跟的是相对路径

require("../lib/server") ../表示上一级目录,后面跟的也是相对路径

对js中的 require('./jquery.gritter.js')($);的解释如下:

require是必须校验

./jquery.gritter.js是参数,表示一个js。

($)表示追加当前对象到调用处

```

3.display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

4.visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

5.span标签:无语义行内元素。

在段内定义与该段样式不同的内容的样式。

同时满足以下条件的内容你可以使用span标签:

1、行内元素(inline)

2、无语义

3、你需要给他添加特定样式或做js钩子的时候

标准属性有:id, class, title, style, dir, lang, xml:lang

事件属性有:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

如:

这是一段话,段落里有一些特殊的需要标记的内容,如红色。

这是一个箭头:.。可以通过定义该class使其显示为一个箭头。

你还可以输入140 个字。J_zishu用作js钩子

链接:https://www.zhihu.com/question/20083052/answer/13916461

```

实例一(完成代码):

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

/* 修改span的字体的颜色 */

span{  color:red;

}

.hfont{

border-color:green;

font-weight:900;

}```

实例二:

实例三:

在span中加style属性:让字体加粗变黑

6.window窗口对象中的属性self,top.

1)self:当前窗口对象(如果是在iframe里,则为该框架的窗口对象)

2)、top:父窗口对象

3)、window:典型情况下,浏览器会为每一个打开的html创建对应的window对象,如果这 个文档包含了多个框架,则浏览器会为原始文档建立一个window对象,再为每个框架创建额外的window对象。可以再当前窗口中直接使用window 的全部属性、方法和集合,即不需要在前面附加计算结果为当前window对象的表达式。虽然window可以省略,但是为了方便阅读以及避免一些漏洞,一 般都使用这个关键字。

4)、location:该对象包含当前url信息,拥有多个属性。默认属性为 location.href,表示整个url,即如果设置location="http://www.ddd.cn",则等同于location.href="http://www.ddd.cn".

如果test.html被加入iframe,则跳转到百度页面。

top.location.href:为引用test.html页面url的父窗口对象的url

self.location.href:为引用test.html页面url的子窗口对象url

self.location 指的是当前页面的location

top.location是指当前页面所属的父页面的location

top.location !== self.location

7.blur事件的使用

$("#customerId").blur(function(){

var customerId = $("#customerId").val();

- //判断客户id是否为空串

if($('#customerId').val() == "") {

$("#customerIdspan").text("");

$('#customerIdSpan').html("客户id不能为空!");

$('#customerId').focus()

}else{

//如果不为空串,根据客户id,发送ajax查询客户信息

$.ajax({

url: "/json/query_customer.htm",

data: {"customerId":customerId},

type: 'get',

dataType: 'json',

success: function(jsonObject) {

if(jsonObject.success){

$("#customerIdSpan").text("");

$("#customerIdspan").text("");

var customerId = jsonObject.data.customerId

var customerName=jsonObject.data.customerName

var customerBizCategory=jsonObject.data.customerBizCategory

//把查询的数据回现到,

$("#customerId").val(customerId);

$("#customerIdspan").text(customerName);

}else{

$("#customerIdspan").text("");

$("#customerIdSpan").text("未匹配到客户");

}

},

});

}

});

0 人点赞