jQuery往返城市和日期查询实例讲解(jquery 设置和返回元素属性)

编辑：rootadmin

推荐整理分享jQuery往返城市和日期查询实例讲解(jquery 设置和返回元素属性)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery 设置和返回元素属性,jquery通过哪个方法可以设置或返回表单字段的值,jquery return,jquery返回顶部代码,jquery通过哪个方法可以设置或返回表单字段的值,jquery返回上一个页面,jquery通过哪个方法可以设置或返回表单字段的值,jquery通过哪个方法可以设置或返回表单字段的值,内容如对您有帮助，希望把文章链接给更多的朋友！

大多旅游网站上都提供了一个城市和日期输入查询的功能。用户在输入框中只需输入城市的拼音或者简称就可以即时查询到相关城市的名称，选择日期时则是出现两个月的日历控件，只需点选日期即可，整个操作简捷明了。本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。

XHTML

设计城市和日期的输入框，注意使用了div#suggest和div#suggest2两个DIV是用来显示城市列表的，默认CSS控制为不显示。CSS

上述样式主要是控制城市查询的外观，而日历控件的样式我们单独使用jquery ui的样式：

jQuery首先要引用主要javascript：

注意aircity.js是以数组的形式储存城市名称等数据。j.suggest.js是控制输入查询城市的，大家可以直接下载使用。主要看下页面使用jQuery。

上述代码实现了输入查询城市，调用城市数据的功能。hot_list:commoncitys是指初始的热门城市，attachObject:"#suggest"是设置输入时关联的显示城市列表的DIV。接下来要加入控制日历的代码。我们需要控制日历的有效日期，即显示当前日期，在当前日期前的日期都不能选中，因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下：

代码首先获取了当前日期（即今天），然后初始日期输入框的内容和样式，再调用detepicker插件，设置最小日期为当前日期，设置numberOfMonths为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。

标签: jquery 设置和返回元素属性

本文链接地址:https://www.jiuchutong.com/biancheng/370393.html 转载请保留说明！

上一篇：jQuery实现连续动画效果实例分析(jquery跳出循环)

下一篇：jQuery+PHP实现可编辑表格字段内容并实时保存