jquery菜鸟教程(jquery菜鸟教程网站)

http://www.itjxue.com  2023-02-13 17:38  来源:未知  点击次数: 

jQuery选择器基础入门教程

本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:

什么是jQuery选择器

使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。

在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回。

首先来看看什么是选择器。

//根据id获取jQuery对象

var

jQueryObject=$("#testDiv");

上例中使用了id选择器,选取id为testDiv的DOM对象并将它放入jQuery对象,最后返回了一个jQuery对象。

现在通过jQueryObject变量就可以操作testDiv图层了,因为jQueryObject是一个jQuery对象,所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容:

jQueryObject.html("修改后的HTML内容");

通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。

jQuery选择器的强大在于提供了丰富的选择器,如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。

jQuery选择器核心函数

jQuery选择器调用的是jQuery核心函数:

jQuery(EXPRESSION,[econtext]);

这个函数接收一个包含选择器表达式的字符串,然后用这个字符串去匹配一组元素。

jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数,或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式(通常由CSS选择器组成),然后根据这个表达式查找所有匹配的元素。

默认情况下,如果没有指定context参数,$()将在当前的HTML

document中查找DOM元素:如果指定了context参数,如一个dom元素集jQuery对象,则会在这个context中查找。在jQuery1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。

参数说明如下:

~Expression:必选参数,选择器表达式。

~Context:可选参数,选择器上下文

~jQuery,选择器返回的jQuery对象,jQuery对象,jQuery对象是一个集合,可以使用链式语法调用各种jQuery函数。

Context参数能够缩小选择器的范围,加快查找速度。

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

希望本文所述对大家jquery程序设计有所帮助。

jquery 从哪里学比较容易,jq菜鸟

jquery的帮助文档是最好的学习文档,当然得有点js基础,网上也有jquery的教学视频,非常不错。其实写学jquery就是为了使用,在工作中有锻炼的机会可以大幅提高你对jquery的理解。在配合比较好的开发工具,那是非常有帮助的,目前从我了解到的前段开发工具中 ,提示功能最强大的是webstorm,还有其他的开发工具比如dreamweaver,eclipse ,文本编辑器editplus 等等。平常多看别人代码,多练习,熟悉相关api,很容易让你脱离所谓的“菜鸟”级别

jquery.post("url",{},function(data),'json');里面的data如何用java操作

1、引入包(本文中的包全部引自struts-2.1.8.1\lib):

struts2-json-plugin-2.1.8.1.jar

json-lib-2.1.jar

commons-collections-3.2.jar

commons-beanutils-1.7.0.jar

commons-lang-2.3.jar

commons-logging-1.0.4.jar

ezmorph-1.0.3.jar

这7个包是返回json形式的数据必须的。因为json大量引用了Apache commons的包,所以要加入4个,commons包,除了commons的包外,还需要引入一个 ezmorph的包。最后加入struts2必须的6个包:

struts2-core-2.1.8.1.jar

xwork-core-2.1.6.jar

ognl-2.7.3.jar

freemarker-2.3.15.jar

commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

2、后台:

1) Userinfo实体类代码

public class UserInfo implements Serializable {

private int userId;

private String userName;

private String password;

get set方法略

}

2) Action类

public class TestAction extends ActionSupport {

private String message; //使用json返回单个值

private UserInfo userInfo; //使用json返回对象

private List userInfosList; //使用josn返回List对象

get set方法略

/*返回单个值*/

public String returnMsg(){

this.message = "成功返回单个值";

return SUCCESS;

}

/*返回UserInfo对象*/

public String returnUser(){

userInfo = new UserInfo();

userInfo.setUserId(10000);

userInfo.setUserName("刘栋");

userInfo.setPassword("123456");

return SUCCESS;

}

/*返回List对象*/

public String returnList(){

userInfosList = new ArrayListUserInfo();

UserInfo u1 = new UserInfo();

u1.setUserId(10000);

u1.setUserName("张三");

u1.setPassword("111111");

UserInfo u2 = new UserInfo();

u2.setUserId(10001);

u2.setUserName("李四");

u2.setPassword("222222");

userInfosList.add(u1);

userInfosList.add(u2);

return SUCCESS;

}

}

3) struts.xml(必须继承json-default、json-default继承自struts-default)

package name="default" namespace="/json" extends="json-default"

action name="returnMsg" class="com.testAction " method="returnMsg"

result name="success" type="json"

param name="root"validate/param

/result

/action

action name="returnUser "

class="com.testAction " method="returnUser "

result name="success" type="json"

param name="includeProperties"

userInfo\.userId,userInfo\.userName,userInfo\.password

/param

/result

/action

action name="returnList" class="com.testAction "

method="returnList"

result name="success" type="json"

param name="includeProperties"

userInfosList\[\d+\]\.userName,userInfosList\[\d+\]\.password

/param

/result

/action

/package

3、前台:

1) 页面引入jquery-1.4.2.js

2) 代码如下:

script language="javascript"

function getMsg(){

$.ajax({

url:'json/returnMsg.action',

type:'post',

dataType:'json',

success:function(data){

$("#result").html(data.message);

}

});

}

function getUser(){

$("# result ").html("");

$.ajax({

url:'json/returnUser.action',

type:'post',

dataType:'json',

success:function(data){

$("#result").append("用户ID:"+data.userInfo.userId+"")

.append("用户名:"+data.userInfo.userName+"")

.append("密码:"+data.userInfo.password+"");

}

});

}

function getUserList(){

$("# result ").html("");

$.ajax({

url:'json/returnList.action',

type:'post',

dataType:'json',

success:function(data){

$.each(data.userInfosList,function(i,value){

$("#result").append("第"+(i+1)+"个用户")

.append("用户名:"+value.userName+"")

.append("密码:"+value.password+"");

}

}

});

}

/script

div id="result"/div

input type="button" value="获得单个消息" onclick="getMsg()"/

input type="button" value="获得用户信息" onclick="getUser()"/

input type="button" value="获得用户列表" onclick="getUserList()"/

4、只要继承extends="json-default",result type设置成json之后,容器会把action的属性自动封装到一个json对象中(json拦截器来做),然后调用ajax的callback方法. 返回json数据

5、includeProperties 参数:输出结果中需要包含的属性值,这里正则表达式和属性名匹配,可以用“,”分割填充多个正则表达式。

如:输出UserInfo的所有属性及UserInfo的userName属性

result type="json"

param name="includeProperties" userInfo.*,

userInfo \. userName /param

/result

6、excludeProperties 参数:输出结果需要剔除的属性值,也支持正则表达式匹配属性名,可以用“,”分割填充多个正则表达式,类同includeProperties

7、输出一个JSON List列表

result name="success" type="json"

param name="includeProperties"

userInfosList\[\d+\]\.userName,userInfosList\[\d+\]\.password

/param

/result

其中userInfosList是action中的一个List类型的属性,userInfosList \[\d+\]\. userName表示,userInfosList中存储的对象0..end的userName属性(list中存储的对象必须有userName属性)。

8、为什么要用includeProperties或excludeProperties 参数:主要是为了过滤掉接口,pojo的set、list、其它对象等不需要的数据防止循环取其它关联对象或找不到接口。如果不配置,默认是处理 action中的所有属性,如果action中有接口注入,json拦截器可能找不到接口而返回不了结果,还有如果action中有一个对象,这个对象与好多对象都有关联,json拦截器会将相关联的所有对象的属性全部转换成json格式,如果其它对象有list、set,其返回结果相当庞大,有可能是死循环而无法返回 。如果不用param name="includeProperties"或其他方式进行json数据过滤,通过debug你会发现前台返回的json字符串,是把 action中的所有属性全部转化成json字符串返回给客户端(包括service接口、pojo所有属性及有关联的pojo。有时候根本返回不了结果,也不报错,后台执行了,但前台执行不到callback function,这主要是因为找不到接口或者关联的pojo太多,造成死循环),一般情况下用的最多的就是root、 includeProperties 和excludeNullProperties参数。当然还有其他的方法,如给pojo的属性加json注解。

9、总结: action中避免使用get开头的action方法,去掉action中的接口的get方法 为json类型的result配置includeProperties, excludeProperties等参数.

jquery怎么实现url地址生成二维码实例

如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。

本文要推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有Canvas格式的,canvas的支持自定义logo和文字在上面。

jquery.qrcode.js 是把它用jquery 方式封装起来的,用它来实现图形渲染,其实就是画图支持canvas 和table 两种方式

支持的功能主要有:

1.text : "" //设置二维码内容 render,canvas

2.width :256, //设置宽度

3.height : 256, //设置高度

4. typeNumber : -1, //计算模式

5.correctLevel : QRErrorCorrectLevel.H,//纠错等级

6.background : "#ffffff", //背景颜色

7.oreground : "#000000" //前景颜色

jQuery的使用方法

使用步骤如下:

1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。

2.然后我们来开始编辑HTML界面代码。

3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。

4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码

在jQuery里$(this).hide()表示什么意思,并且这里面的this指什么东西?

$(this).hide()是jQuery里面的隐藏功能,表示隐藏当前元素,确切点应该指的是对象,比如有一个按钮,你对该按钮添加这个点击事件就可以点击此按钮,实现隐藏这个按钮的功能,这里的this表示当前对象,就是你鼠标点击的那个页面元素对象

希望可以帮到你

(责任编辑:IT教学网)

更多

推荐Fireworks教程文章