前端基础之jQuery
2017-12-21 17:08
302 查看
一、jQuery概述
网址链接:http://jquery.cuishifeng.cn/
一、jQuery是什么?
- jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
- 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
- jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二、什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象 var variable = DOM 对象 $variable[0]:jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
query的基础语法:$(selector).action()
参考:1)http://jquery.cuishifeng.cn/
2)http://www.w3school.com.cn/jquery/
二、寻找元素(选择器和筛选器)
一、选择器
https://www.cnblogs.com/gxlinhai/p/4263197.html
1、基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2、层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3、基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
4、属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
5、表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
6、表单属性选择器
:enabled :disabled :checked :selected
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ width: 200px; height: 200px; background-color: wheat; padding: 50px; border: 50px solid rebeccapurple; margin: 50px; } </style> </head> <body> <div class="box1"> DIVDIDVIDIV </div> <p></p> <script src="jquery-3.1.1.js"></script> <script> var $height=$(".box1").height(); var $innerHeight=$(".box1").innerHeight(); var $outerHeight=$(".box1").outerHeight(); var $margin=$(".box1").outerHeight(true); $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin) </script> </body> </html>View Code
四、扩展方法(插件机制)
一、jQuery.extend(object)
扩展jQuery对象本身
用来在jQuery命名空间上增加新函数
在jQuery命名空间上增加两个函数
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
二、jQuery.fn.extend(object)
扩展jQuery元素集来提供新的方法(通常来制作插件)
1、增加两个插件方法
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>
相关文章推荐
- 前端基础---jquery
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储字符串
- web前端基础——jQuery编程基础
- 前端学习:jQuery基础知识
- 前端计划第二天-jQuery基础
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-在字符串中使用引号
- 基础前端之JQuery
- 前端基础-jQuery的内容之选择器
- WEB前端 | JS基础——(13)JQuery
- 前端学习笔记--jQuery--基础知识--样式篇
- 源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
- 前端基础之jQuery
- 前端基础-jQuery的事件的用法
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字
- 前端基础之JQuery - day15
- 前端学习笔记--jQuery--基础知识--动画篇
- 前端基础快速学习- JQuery
- 前端基础-jQuery的动画效果
- 网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?
- 前端框架技术--jQuery基础应用