Jquery编程基础

2025-01-06 技术教程

1、Jquery

(1)、Jquery是一个兼容多浏览器的js库，其核心理念：将js和DOM编程封装起来了，使得开发更加的便捷；

(2)、jquery的中文文档：http://www.php100.com/manual/jquery

其内容大致如下：

(3)、去Jquery官网下载一个jquery文件，的引入到你所编程的目录下面。

<scriptsrc="js/jquery.js"></script>

此时就可以用Jquery提供的各种函数了；

(4)、引入Jquery后的代码模型：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title></head><body><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'></script></body></html>

2、常用部分方法

(1)、选择器

i>、id选择器：$("#id名字")

ii>、标签选择器：$("div")

iii>、class选择器：$(".class名字") 这些选择器中间以\,分开，可以同时去找。

iv>、层级选择器：$("form div")

(2)、input系列下的

i>、$(":text") <==> $("input[type = 'text']")

对于其text/html方法的解读：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title></head><body><divid='id1'>12<a>3</a>4</div><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'>text=$('#id1').text();html=$('#id1').html();value=$('#id1').text("abc");</script></body></html>

对于jquery来说，基本上对方法都满足：空的为取值，不空为赋值；

ii>、例：

<inputname="username"type='text'value='999999'/>取出value的值：$("input[name='username']").val();修改value的值：$("input[name='username']").val('abc');取出其属性：$("input[name='username']").attr('name');修改了name的属性：$("input[name='username']")..attr('name','ok');

iii>、例：

<inputname="username"type='checkbox'value='999999'/>默认所有的checkbox都选中：$("input[type='checkbox']").prop('checked',true);此时只显示,不可用这个小框框：$("input[type='checkbox']").prop('disabled',true);

iv>、追加样式：

$('.c1').addClass('c2');//所有的c1这个样式的再加上c2样式$('.c1').removeClass('c2');//所有的c1这个样式的再删除c2样式$('.c1').toggleClass('c2');//所有的c1这个样式加上c2样式,在按一次又删除c2样式,再按一次又添加成c2样式；来回的添加,删除c2样式；

3、回滚顶部

(1)、Jquery中最重要的函数：

$(function(){})

上面这个函数是Jquery中最特殊的函数：当页面加载完成之后，默认会执行这么一个函数

$：Jquery所特有的；只有当引用了Jquery之后，$才变得有意义！！！

(2)、回滚顶部的例子

scroll：当页面滚动条发生变化的时候执行的函数；

代码如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title><style>.returnTop{position:fixed;width:50px;height:60px;right:20px;bottom:20px;background-color:red;color:white;}.hide{display:none;}</style></head><body><divid='return_top'class='returnTophide'>返回顶部</div><divstyle='height:3000px'>以下都是内容.........</div><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'>$(function(){//当页面(框架)加载完成之后,默认执行该函数;$('#return_top').click(function(){$(window).scrollTop(0);//回到顶部})//换了一种绑定事件的方式;})$(window).scroll(function(){//console.log(123);//滚动一次滑轮,这里边的函数执行一次;varheight=$(window).scrollTop();//取得滚动条距顶部的高度;console.log(height);if(height>0){//显示返回顶部$('#return_top').removeClass('hide');}else{$('#return_top').addClass('hide');//隐藏返回顶部}});/*functionGo(){$(window).scrollTop(0);}*/</script></body></html>

运行结果

随着滚动条的下拉，会出现一个返回顶部的按钮，按一下，返回顶部，按钮随之消失。

4、文本操作

(1)、追加

$('p').append('<b>hello</b>');//在所有的p标签的内容后面加上<b>hello</b>

完整代码如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title><style></style></head><body><p>Iwouldliketosay:<span></span></p><inputtype='button'id='addId1'value='追加1'/><inputtype='button'id='addId2'value='追加2'/><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'>$(function(){$('#addId1,#addId2').click(function(){//获取当前点击的标签;varcurId=$(this).attr('id');if(curId=='addId1'){//$('p').append('alex');//$('p').text('Iwouldliketosay:alex');$('pspan').text('alex');}elseif(curId=='addId2'){//$('p').append('oldboy');//$('p').text('Iwouldliketosay:oldboy');$('pspan').text('oldboy');}else{}//$('p').append('alex');});})</script></body></html>

上面的$(this)：表示你点击的当前的那个标签。

5、搜索框的Jquery实现

代码如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title><style>.black{color:black;}.gray{color:gray;}</style></head><body><inputtype='text'class='gray'id='tip'value='请输入关键字'/><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'>$(function(){//链式表示：$('this').focus(function(){}.blur(function(){}).click(function(){})$('#tip').focus(function(){//$('#tip')$(this)varid=$(this);id.addClass('black');if(id.val()=='请输入关键字'||id.val().trim()==''){id.val('');}})$('#tip').blur(function(){varid=$(this);varval=id.val();if(val.length==0||id.val().trim()==''){id.val('请输入关键字');id.attr('class','gray');//修改其属性为灰色}else{id.attr('class','black');//修改其属性为黑色}})})</script></body></html>

6、Jquery实现全选和反选的案例

代码如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>页面一</title></head><body><divid='checklist'><inputtype='checkbox'value='1'/>篮球<inputtype='checkbox'value='1'/>足球<inputtype='checkbox'value='1'/>羽毛球</div><inputtype='button'value='全选'id='selectAll'/><inputtype='button'value='不选'id='unselectAll'/><inputtype='button'value='反选'id='reverseAll'/><scriptsrc='js/Jquery.js'></script><scripttype='text/javascript'>$(function(){$('#selectAll').click(function(){$('#checklist:checkbox').attr('checked',true);})$('#unselectAll').click(function(){$('#checklist:checkbox').attr('checked',false);})$('#reverseAll').click(function(){$('#checklist:checkbox').each(function(){varcurStatus=$(this).attr('checked');$(this).attr('checked',!curStatus);})})})</script></body></html>

运行结果

Jquery还有好多其他常见的方法，只有掌握一些常用的，其他的用到时在快速查找，掌握使用即可!!!