码迷,mamicode.com
首页 > Web开发 > 详细

jquery学习笔记

时间:2017-01-11 08:17:27      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:lib   使用   通过   query   失败   精确   this   htm   hid   

学而时习之,不亦说乎;从头整理一遍jquery学习知识点;

一、引用:

自己下载jquery文件引用:

<srctip src="XXX/jquery.js"></script> 

使用其他网站的CDN:

如google:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head> 

在HTML5中 已经默认javascript是所有浏览器的脚本语言  多以不必在script标签里写 type="text/script"

二、初次使用:

在js中写jquery:

文档加载完毕后才执行的jq:注意原始必须的代码,js代码写于function函数内;

$(document).ready(function(){

//js内容

});

    如果文档没有完全加载之前就执行函数,某些操作可能会失败(如选择器所选择的元素为找到);

 添加事件方法(以click()方法为例):

$("div").click(function(){
//事件内容
});

  

三、jQuery 语法

基础语法是:$(selector).action()                  //$选择器选择selector  执行action()方法;

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

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

。。。。。。

 

四、jquery选择器:

    通过jQuery选择器来精确的找到所要操作的元素(类似于css选择器);

JQuery可以通过元素的标签、属性、内容对HTMl元素进行选择;

1、元素选择器:

jQuery使用css选择器来选取HTML元素;

    $("p.intro")  选取所有class=“intro”的p元素    

2、属性选择器:

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

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

$("[href=‘#‘]") 选取所有带有href切值为“#”的元素

$("[href!=‘#‘]") 选取所有带有href且值不等于“#”的元素

$("[href$=‘.jpg‘]") 选择所有带有href且值以.jpg结尾的元素

 

3、Css选择器:

$("P").css("backgeound-color","red");

 

4、其他选择器:

$(this)    当前HTML元素  

$("p")    标签选择器

$("p.intro")    calss等于intro的p元素

$("#intro")     id选择器

$("ul li:first")    ul  下的第一个li

$("div#intro .head")   id=intro的div下所有class=head的 元素 

 

五、jQuery事件

  1、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

 

Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

更多事件请参考jQuery手册;

 

jquery学习笔记

标签:lib   使用   通过   query   失败   精确   this   htm   hid   

原文地址:http://www.cnblogs.com/zhuyucun/p/6272238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!