美文网首页我爱编程
jquery 之js的库学习

jquery 之js的库学习

作者: helinyu | 来源:发表于2017-02-22 13:59 被阅读87次

js要写很多动画以及对页面的操作的时候,若是要自己去写,肯定会涉及到很多的内容;
所以,封装成为库就很有必要,然后进行重用等等。jquery是一个很知名的库在js的应用上面。
所以就学习了关于jquery的使用以及有关的知识。

学习主要资源:
http://www.w3school.com.cn/jquery/ 【主要】
http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 【参考】
http://www.w3school.com.cn/jquery/jquery_reference.asp 【参考手册(内容的参考)】

jQuery 是一个js库(函数库),简化js编;(在h5上又有一个轻量级的库zepto【有时间再去研究】)
目标: 写得更好,做得更多。

首先具备的基础知识:html、css、js
jQuery 库包含以下特性(8):
• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

向页面添加js库,其中包含所有的jquery库。
(1)在当前文件夹中添加的方式:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

(2) 使用google的CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

(3)使用microsoft的CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

1)<script>标签应该是位于页面的<head>部分。
2)在<script> 标签中没有使用type="text/javascript" ,因为JavaScript是html5以及所有现代浏览器中默认的脚本语言。

1、对html的元素进行查询和操作##

对指定的某一类型的控件进行操作
对同一类型的控件进行操作

语法:$(selector).action()
$(this).hide();
美元$符号定义了jquery 、 选择符(selector)“查询”和“查找”html元素、jQuery的action()执行对元素的操作。

jQuery 使用的语法是XPath与css选择器语法的组合。

文档就绪函数:(表示已经加载完成)
$(document).ready(function(){
……
});
如果在文档没有完全加载之前就运行里面的函数,操作可能失败。
(1)视图操作一个不存在的元素
(2)获得未完全加载的图像的大小。

2、jQuery元素选择器#

选择器允许对元素组或者单个元素进行操作;用了css选择器的特性。
jQuery元素选择器和属性选择器允许通过标签、属性名或内容对HTML元素进行选择。

$("p") 选取<p> 元素
$("p.intro")选取所有的class="intro"的p元素
$("p#demo") 选$取所有id="demo"的p元素。

jQuery 属性选择器#

使用了xpath表达式来选择给定属性的元素

$("[href]")选取所有带有href属性的元素;
$("[href='#']") 选取所有带有href值等于# 的元素;
$("[href!='#']") 选取所有带有href值不等于“#”的元素;
$("[href='.jpg']") 选取所有href值以".jpg" 结尾的元素;

jQuery 的css选择器#

可以用于改变html元素的css属性


给html元素设置颜色等属性

jQuery处理事件#

事件(函数)是jquery的核心,

事件处理程序指的是当html中发生了某些事件时候所调用的方法。通常将jquery的代码放在<header>部分

单独文件中的函数: 把函数放在一个单独的文件中,这样有利于维护。

jQuery名称冲突
(由于js中很多库都是使用$符号进行写的,所以会冲突)
所以,jquery使用了名为noConflict()的方法来解决问题。


示例函数
一些常用的方法

PS:
1、jquery的基本概念和添加到页面的方式
2、html元素的查询和操作
3、jQuery元素选择器
4、jQuery

相关文章

  • jQuery常用选择器总结

    学习鸡汤:学习之美,在于一头雾水 jQuery介绍: jQuery是别人封装好的一个js库,免费开源易用,提供了我...

  • js jquery的区别

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文...

  • jquery 之js的库学习

    js要写很多动画以及对页面的操作的时候,若是要自己去写,肯定会涉及到很多的内容;所以,封装成为库就很有必要,然后进...

  • cookie.js随记

    cookie: 使用jquery的插件:jquery.cookie.js库: jquery.js插件:jquer...

  • jQuery 入门

    jQuery jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对...

  • 00-jQuery初识

    什么是jQuery jQuery是一个JavaScript库 jQuery可以简化原生JS的操作 对比原生JS,写...

  • juqery初入门

    处罚:张邵阳 jquery:js学习和使用都比较难 jQuery简介:是一个快速、简洁的JavaScript库.设...

  • jQuery

    1、jQuery是js库,库:相当于java的工具类,是存放东西的,jQuery是存放js代码的地方,放的是用js...

  • jquery 源码解析

    jQuery 是一个非常常用的 js库,值得我们深入的学习。我们可以通过学习 jQuery 的源码,来知道如何规范...

  • (17.04.24)jquery、原生和jq的区别、选择器(jq

    jquery:库,框架    js,别人封装成的js 官网:http://jquery.com/ 1.7 jq 1...

网友评论

    本文标题:jquery 之js的库学习

    本文链接:https://www.haomeiwen.com/subject/hvqmwttx.html