Jquery学习笔记

double_yin

于 2017-09-19 20:41:53 发布

阅读量239

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_29619731/article/details/78034376

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.JS笔记

1.Jquery表单验证：

jquery将$(“.errer”)的div块设置为$('.error').hide();

然后在需要显示的地方设置属性为 .show（）；

获取某个对象的值：$(“.value”).val().

2.js查看某个值的属性：alert(typeof(val));

3.js输出代码：alert();

4.在html中调用JS代码

5.在PHP里调用JS代码： echo "<script type=‘text/javascript’>document.write(str)</script>";

6..使用JS获取html里?**&**传递的参数（转载）：

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
//实现中文转码
     var url=decodeURI(window.location.search);
     var r = url.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

7.Jquery可实现播放动画的功能。操作Bootstrap的字体图标（需要在项目里加入字体文件）能够实现快捷的小功能。

二.采用clipboard类实现复制文本框内容

包含文件

<scriptsrc="/clipboard.min.js"></script>

1.获取全局的字符串：

copytext=“复制的文字”;//当不使用var时，即为全局变量。

$(".message").append('<div class="row" style="padding-top:10px;"><button type="button" class="copy_new_link btn btn-info col-md-1" οnclick="copy_new_link()">复制链接</button></div>');
var clipboard = new Clipboard('.copy_new_link',{
		text:function(){	
			return copytext;
	}
	});

//实现点击延时动画的功能
	clipboard.on('success', function(e) {
		 e.trigger.innerText = "已复制";
	        setTimeout(function(){
	        	e.trigger.innerText = "复制链接";
		    }, 1000);
	});
	clipboard.on('error', function(e) {
		alert("复制失败，请选择手动或者切换浏览器！");
	     
	});

2.获取绑定在控件上的值：

<Button type='button'  class='copy_item btn btn-info ' data-clipboard-text='"+root+"/"+data[i][0]+"' οnclick='copyitem()'>复制推广链接</button> ";

function copyitem(){
	var btn = document.querySelectorAll('.copy_item');
	var clipboard = new Clipboard(btn);
	clipboard.on('success', function(e) {
		 e.trigger.innerText = "已复制";
	        setTimeout(function(){
	        	e.trigger.innerText = "复制推广链接";
		    }, 1000);
	});
	clipboard.on('error', function(e) {
		alert("复制失败，请选择手动或者切换浏览器！");
	     
	});
			
}

三.实现根据输入框查询，筛选不同的行显示

<div style="text-align:centor;margin-left: 60%; margin-bottom: 20px;"> Search:<input type="text" id="chose_row"/></div>

$('#chose_row').keyup(function(){
	        $('table tbody tr').hide().filter(":contains('" +($(this).val()) + "')").show();
	      }).keyup();

四.JQuery使用hover()事件实现鼠标进入和离开功能

hover的第一个参数（匿名方法）表示mouseenter，第二个参数表示mouseleave，即表示可以为hover传递两个参数。直接在元素上注册这两个函数来控制。

$(function(){
		$(".show_list").hide();		
		$( "li" ).hover(function(){
			$(this).find(".show_list").show();
			
		},function(){
			$(this).find(".show_list").hide();			
		});	
});