Jquery编程基础
1、Jquery
创新互联公司成立十多年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供做网站、成都做网站、网站策划、网页设计、国际域名空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,创新互联公司通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。
(1)、Jquery是一个兼容多浏览器的js库,其核心理念:将js和DOM编程封装起来了,使得开发更加的便捷;
(2)、jquery的中文文档:http://www.php100.com/manual/jquery
其内容大致如下:
(3)、去Jquery官网下载一个jquery文件,的引入到你所编程的目录下面。
此时就可以用Jquery提供的各种函数了;
(4)、引入Jquery后的代码模型:
页面一
2、常用部分方法
(1)、选择器
i>、id选择器:$("#id名字")
ii>、标签选择器:$("div")
iii>、class选择器:$(".class名字") 这些选择器中间以\,分开,可以同时去找。
iv>、层级选择器:$("form div")
(2)、input系列下的
i>、$(":text") <==> $("input[type = 'text']")
对于其text/html方法的解读:
页面一 1234
对于jquery来说,基本上对方法都满足:空的为取值,不空为赋值;
ii>、例:
取出value的值:$("input[name = 'username']").val(); 修改value的值:$("input[name = 'username']").val('abc'); 取出其属性:$("input[name = 'username']").attr('name'); 修改了name的属性:$("input[name = 'username']")..attr('name', 'ok');
iii>、例:
默认所有的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:当页面滚动条发生变化的时候执行的函数;
代码如下:
页面一 返回顶部以下都是内容.........
运行结果
随着滚动条的下拉,会出现一个返回顶部的按钮,按一下,返回顶部,按钮随之消失。
4、文本操作
(1)、追加
$('p').append('hello'); //在所有的p标签的内容后面加上hello
完整代码如下:
页面一 I would like to say:
上面的$(this):表示你点击的当前的那个标签。
5、搜索框的Jquery实现
代码如下:
页面一
6、Jquery实现全选和反选的案例
代码如下:
页面一 篮球 足球 羽毛球
运行结果
Jquery还有好多其他常见的方法,只有掌握一些常用的,其他的用到时在快速查找,掌握使用即可!!!
文章名称:Jquery编程基础
网页路径:http://azwzsj.com/article/joeggp.html