本篇文章就来给大家介绍一些值得收藏的几个 jQuery 代码片段. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 是一个兼容多浏览器的 JavaScript 库, 核心理念是 write Less,do more(写得更少, 做得更多).jQuery 使用户能更方便地处理 html(标准通用标记语言下的一个应用),events, 实现动画效果, 并且方便地为网站提供 Ajax 交互. jQuery 还有一个比较大的优势是, 它的文档说明很全, 而且各种应用也说得很详细, 同时还有许多成熟的插件可供选择. jQuery 能够使用户的 HTML 页面保持代码和 HTML 内容分离, 也就是说, 不用再在 HTML 里面插入一堆 JS 来调用命令了, 只需要定义 id 即可, jQuery 已经成为最流行的 JavaScript 库, 下面给大家推荐几款常用的 jQuery 代码.
1, 管理搜索框的值
现在各大网站都有搜索框, 而搜索框通常都有默认值, 当输入框获取焦点时, 默认值消失. 而一旦输入框失去焦点, 而输入框里又没有输入新的值, 输入框里的值又会恢复成默认值, 如果往输入框里输入了新值, 则输入框的值为新输入的值. 这种特效用 jQuery 很容易实现:
- $("#searchbox")
- .focus(function(){$(this).val('')})
- .blur(function(){
- var $this = $(this);
- // '请搜索...'为搜索框默认值
- ($this.val() === '')? $this.val('请搜索...') : null;
- });
2, 反序访问 jQuery 对象里的元素
在某些场景下, 我们可能需要反序访问通过 jQuery 选择器获取到的页面元素对象, 这个怎么实现呢? 看下面代码:
- // 要掌握 jQuery 对象的 get 方法 以及数组的 reverse 方法即可
- var arr = $('#nav').find('li').get().reverse();
- $.each(arr,function(index,ele){
- .... ...
- });
3, 克隆 table header 到表格的最下面
为了让 table 具有更好的可读性, 我们可以将表格的 header 信息克隆一份到表格的底部, 这种特效通过 jQuery 就很容易实现:
- var $tfoot = $('<tfoot></tfoot>');
- $($('thead').clone(true, true).children().get().reverse()).each(function(){
- $tfoot.append($(this));
- });
- $tfoot.insertAfter('table thead');
4, 使用 jQuery 重绘图片的大小
关于图片大小的重绘, 你可以在服务端来实现, 也可以通过 jQuery 在客户端实现.
- $(Windows).bind("load", function() {
- // IMAGE RESIZE
- $('#product_cat_list img').each(function() {
- var maxWidth = 120;
- var maxHeight = 120;
- var ratio = 0;
- var width = $(this).width();
- var height = $(this).height();
- if(width> maxWidth){
- ratio = maxWidth / width;
- $(this).CSS("width", maxWidth);
- $(this).CSS("height", height * ratio);
- height = height * ratio;
- }
- var width = $(this).width();
- var height = $(this).height();
- if(height> maxHeight){
- ratio = maxHeight / height;
- $(this).CSS("height", maxHeight);
- $(this).CSS("width", width * ratio);
- width = width * ratio;
- }
- });
- //$("#contentpage img").show();
- // IMAGE RESIZE
- });
5, 滚动时动态加载页面内容
有些网站的网页内容不是一次性加载完毕的, 而是在鼠标向下滚动时动态加载的, 这是怎么做到的呢? 看下面代码:
- var loading = false;
- $(Windows).scroll(function(){
- if((($(Windows).scrollTop()+$(Windows).height())+250)>=$(document).height()){
- if(loading == false){
- loading = true;
- $('#loadingbar').CSS("display","block");
- $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
- $('body').append(loaded);
- $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
- $('#loadingbar').CSS("display","none");
- loading = false;
- });
- }
- }
- });
- $(document).ready(function() {
- $('#loaded_max').val(50);
- });
本文转载自: https://segmentfault.com/a/1190000016895814
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/16130.html