Jquery入门(一)

页面导航:首页 > 网络编程 > JavaScript > Jquery入门(一)

Jquery入门(一)

来源: 作者: 时间:2016-02-19 09:19 【

很早前就看到Jquery,但是博客一直没写,因为一直没用到,校招也忙成狗了。先是去了一家小创业公司,环境确实不错,不过后面又拿到另外一家的offer,考虑之后最后还是去另外一家

很早前就看到Jquery,但是博客一直没写,因为一直没用到,校招也忙成狗了。先是去了一家小创业公司,环境确实不错,不过后面又拿到另外一家的offer,考虑之后最后还是去另外一家。最后还是进入了一家我个人还是觉得很满意的公司,环境条件是我大学里面就很憧憬的,鼓掌!!!!!!鼓掌!!!!!!


互联网公司的工作氛围比较轻松融洽。没ps3,xbox但是有一张桌上足球桌。其实我大学里最喜欢的是类似豌豆荚这样企业文化的公司,有个简简单单的阿姨,简简单单的人际关系,最重要的,有好吃的。不过,实力问题,豌豆荚这样的企业还需要我多两三年磨练。豌豆荚虽然现在被巨头压得喘不过气,不过也希望豌豆荚越走越好。


实习阶段老大跟我说的是项目主要用jQuery EasyUi,js一直比较弱,之前想学没用到也没写了,界面的写得少。现在开始借助w3cschool的教程加其他人的资料进行学习。当然用一手资料是最推荐的。jQuery的官方Learning center。

\

里面的四个人厉害!


Jquery是一个js框架,里面集合了好多js的东西,方便使用,理念就是少写多用,也希望能在多种浏览器进行兼容。做前端的师兄装了多个浏览器,就是测试兼容性的问题。


Jquery用处: HTML 元素选取、元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX等等。


简单入门例子:




<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>


点击我,我会消失。


点击之后,文字消失,看到script的src没有,你需要去官网一个文件,

Download the compressed, production jQuery 1.11.1 压缩过的产品版本。

Download the uncompressed, development jQuery 1.11.1 未压缩开发版本。


除了自己建立文件,还可以采用CDN(Content Delivery Network,内容分发网络),简单来说就是联网使用近的服务器的资源。


<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
这里是微软的,神奇的是用了这个之后火狐可以显示效果了,谷歌的就不用了,最近被墙的厉害,用GoAgent也慢。


同时,也在Eclipse中实现Github的提交是很方便的事情:GitHub使用教程for Eclipse。博客园里面一篇文章,按上面的操作成功push。同时自己在博客上也添加了自己的GitHub地址,都是些做过的小项目传了上去。


进入正题:

jQuery 语法:

只要知道这个就知道整个框架的核心东西了。因为其他都是封装好的东西,因为w3c有很多资料,就不再重复。

JQUERY语法语法 $(selector).action() $定义jquery selector 查找元素 action 元素操作


$

$ 其实是JQuery的别名,其实jQuery源文件中都是JQuery.xx。你可以把它看成是一个函数名。

var my=jQuery.noConflict(),使用自己的名称,my来代替 $ 符号。


SELECTOR

元素选择器

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".t").hide() - 隐藏所有 class="t" 的所有元素

$("p.t").hide() 隐藏所有class=“t”的元素

$("#t").hide() - 隐藏所有 id="t" 的元素

$("p#t").hide()-隐藏所有id=“t”的元素

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色:$("p").css("background-color","red");

主要就是选择器上的选择,action的话有专门的api,找对要操控的东西,进行相应的方法操控即可。


action

这东西方便和牛逼的地方都在这里,为什么说上面那github上的四个人厉害,就是他们四个人用了js实现之后让我们方便调用,而要调用的方法就像jdk的api一样,jQuery Core API Documentation。当然jQuery方法少的多了。

像hide,fadeIn这些一看就知道意思的,再结合你听听上网看到的那些华丽的效果,结合方法名直接就可以知道这些方法有什么用。


元素那一块的id,name,class之类的东西搞不懂,那就要回去看看css和html的东西。

而想读读js源文件,那就要好好看看js和dom操作的一些内容了。



Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <