在W3CSCHOOL上学习jQuery,以下内容算是我把W3CSCHOOL上的内容用自己的话翻译了一遍吧,方便自己以后复习。
总的来说,jquery是一个jsp库。想要使用jquery库,只要把下载下来的jquery库包含在网页文件中就可以用了。因为jquery库是一个包含了所有jquery函数的jsp文件。
【是什么】
1. jQuery是JSP的一个库。
2. jQuery可以:对HTML元素进行选取/操作;定义HTML事件函数;添加JSP特效;通过HTML DOM进行遍历;AJAX
【配置】
很简单:只要从jquery网站上下载jquery库,包含到网页文件中 即可使用。
jquery库是一个JSP文件,包含了所有的jquery函数。
也可以使用Google或Microsoft的CDN(即加个外链)。优点是在别人访问你的页面时,CDN可能在客户端缓存内已留下内容,因此加载速度会加快。
【语法概览】
首先来看一段W3CSCHOOL上作为例子的经典jquery代码(说出高亮部分的含义就会明白其基本语法啦):
因为jquery都是写在<head>标签里的,如果想把jquery函数放到别的文件里,可以这样做:
=====================================================================================================
【HTML元素的选取和操作】
最基本的语法:
$(selector).action()
定义jQuery 要查询/查找的HTML元素 要对元素执行的操作
例如,对元素进行隐藏:
- $(this). hide()//隐藏当前元素
- $("#test").hide()//隐藏id="test"
- $("p").hide()//隐藏所有<p>元素
- $(".test").hide()//隐藏class="test"元素
【选择器】
- 选元素:
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
- 选属性:
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
- 选css并进行更改(把<p>标签里的背景颜色改成红色)
$("p").css("background-color","red");
【函数】
最基本的语法:
$(selector).event(function(...))
因什么元件触发 因什么动作触发 触发的内容
比如说:
“因对button元件的click操作,导致function里面的动作内容”