jQuery 是一个 Script 库,它通过封装原生的函数得到一整套定义好的方法。它的作者是 John Resig,于 2006 年创建的一个开源项目,随着越来越多开发者的加入,jQuery 已经集成了 JavaScript、、DOM 和 Ajax 于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。
JQuery 的优点: 小巧、方便、功能强大。插件丰富、开源、免费。
jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点:
1. 像 CSS 那样访问和操作 DOM
2. 修改 CSS 控制页面外观
3. 简化 JavaScript 代码操作
4. 事件处理更加容易
5. 各种动画效果使用方便
6. 让 Ajax 技术更加完美
7. 基于 jQuery 大量插件
8. 自行扩展功能插件
jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript 要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到单独的方法,感觉非常有心。最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼着考虑不同的兼容问题。
好!以上都是网摘!
首先我们知道 jquery 是 javascript 的一个强大的库,想用使用我们就必须先将他引入到 js 文件中下面是步骤:
首先我们下载一个 jquery 文件,并把他在 js 页面的 head 区域写上如下的代码:
这样就把 jquery 文件引入了,注意这个引入方法是置顶的!;
jquery 的用法与 js 的大体类似;
*****************************************************************************************
说一下 JQuery 选择器
网摘:
1、JQuery 选择器用于查找满足条件的元素,比如可以使用 $("# 控件 id") 来根据控件 id 获得控件的 JQuery 对象。相当于 getElementByid。
2、$("TagName") 来获取所有指定签名的 JQuery 对象,相当于 getElementsByTagName。
3、CSS 选择器,同时选择拥有某个样式的多个元素:
$(".text").click(function(){alert($(this).text();)})
5、层次选择器:
*********************************************************************************************
看一下练习:
body 里面:
- <div id="aa">
- 123
- </div>
- <div id="a1">
- </div>
- <div id="a1">
- </div>
- <span id=a1>
- </span>
- <input type="text" name="uid" id="asd" value="123" />
- </body>
1. 找元素:
js:
jquery:
输出的类型:
Js 中找元素,找的是 DOM 对象
Jquery 中找对象,找的是 Jquery 对象
2. 操作内容:
js:
- //操作内容
- //非表单元素的
- alert(a.innerText); //获取文本
- alert(a.innerhtml); //获取html代码
- //表单元素
- alert(a.value); //获取value值
- a.value = "hello"; //更改value值
jquery:
- //操作内容
- //非表单元素的
- alert(a.text()); //获取文本
- a.text("bbbbbbbbbbbbb") //更改文本内容
- alert(a.html); //获取html代码,更改同上
- //表单元素
- alert(a.val()); //获取表单的value值
- alert(a.val("hello")); //更改表单value的值
3. 操作属性:
js:
- //操作属性
- a.setAttribute("test", "test"); //设置属性 可添加,可修改
- a.removeAttribute("test"); //移除属性
- alert(a.getAttribute("value")); //获取value值
jquery:
- //操作属性
- a.attr("test","test");//设置,添加属性;
- a.removeAttr("test");//移除一个属性
- alert(a.attr("value"));//给一个参数为获取,给两个为设置
- //prop方法:也可以对属性进行操作,不容易出现BUG
- a.prop("test","test");//添加属性
- a.removeProp("test");//移除
- alert(a.prop("test"));
4. 操作样式
js:
- //操作样式;
- //更改字体大小
- //只能获取内联样式表
- a.Style.fontSize = "30px";
jquery:
- //操作样式
- a.css("background-color", "aqua");
- //给两个参数为设置,给一个参数为获取
************************************************************************
网摘:
获取样式 attr("class"),设置样式 attr("class", "myclass")。
追加样式 addclass("myclass")。
移除样式 removeclass("myclass")。
切换样式 togleclass("myclass")。如果存在则去掉样式,如果不存在则添加。
判断样式是否存在: hasclass("myclass")。
************************************************************************
5. 统一操作元素
js:
- //统一操作元素属性
- var d = document.getElementsByClassName("a1");
- for(var i=0;i)
- {
- d[i].style.fontSize = "30px";
- }
jquery:
- //统一样式操作:
- $(".a1").css("font-size","30px");
6. 添加 jquery 事件:
一个全选的例子,用 jquery 来写非常方便
当点击全选的时候 下面的选项都被选中,移除后,都不选中
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- </head>
- <body>
- <input type="checkbox" id="ck" />
- 全选
- <br />
- <br />
- <input type="checkbox" class="ck" />
- <input type="checkbox" class="ck" />
- <input type="checkbox" class="ck" />
- <input type="checkbox" class="ck" />
- <input type="checkbox" class="ck" />
- </body>
- </html>
- <script type="text/javascript" src="js/jquery-1.11.2.min.js">
- </script>
- <script>
- //添加事件的方法:
- $("#ck").click(function() {
- //找到自身的选种状态
- //$(this)筛选本身,自身
- $(".ck").prop("checked", $(this).prop("checked"));
- //找到所有的$(".ck"),设置属性:.prop("checked",属性既是上面的自身状态)!
- })
- //找到ck;.click代表点击事件,没有方法的方法名=匿名函数
- </script>
图:
*****************************************************************
网摘:
JQuery 中事件的绑定:$("#btn").bind("click",function(){})。
JQuery 用 $("#btn").click(function(){}) 来简化。
调用事件对象的 stopPropagation() 方法终止事件冒泡。
移除事件绑定: unbind() 方法即可移除元素上绑定的事件,如果 bind("click") 则移除 click 事件的绑定
*****************************************************************
7. 调用样式表:
做一个小例子:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="js/jquery-1.11.2.min.js">
- </script>
- <meta charset="{CHARSET}">
- <title>
- </title>
- </head>
- <style>
- .aa{ width: 100px; height: 100px; float: left; background-color: #E77918;
- margin: 3px; }
- </style>
- <body>
- <div class="aa">
- </div>
- <div class="aa">
- </div>
- <div class="aa">
- </div>
- <div class="aa">
- </div>
- </body>
- </html>
- <script>
- //找到div
- //加点击事件
- $(".aa").click(function() {
- $(".aa").css("background-color", "#E77918");
- $(".aa").css("border-radius", "0px");
- //找到所有的恢复
- $(this).css("background-color", "blue");
- $(this).css("border-radius", "55px");
- //找到自身元素,替换为blue
- })
- //相当简洁
- </script>
轻轻松松实现点谁谁变色变圆,且恢复其他的原有颜色与形状:
图:
jquery 基础,有不懂的一定要看强大的注释
来源: http://www.cnblogs.com/xuan584521/p/6528547.html