Jquery基础学习

JQuery是Javascript的一个库，使用非常方便。我在进行个人网站开发的时候不断接触到前端知识，之前也学过HTML，css相关知识。虽然我不是专门研究前端的，也对前端方向

一、Jquery基础

1、jquery语法：

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。它允许CSS选择器选择元素。

基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有段落
  • $(".test").hide() - 隐藏所有 class="test" 的所有元素
  • $("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪函数：

$(document).ready(function(){ --- jQuery functions go here ---- });
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子： 试图隐藏一个不存在的元素 获得未完全加载的图像的大小

插一句，说一下DOM。 HTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。

有了对象模型，我们可以查找HTML中所有的元素，可以对所有元素进行操作。 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

2、jquery选择器

1）元素选择器 jquery使用CSS选择器选择HTML元素。即要学会如何使用CSS选择器。

  • $("p") 选取

    元素。

  • $("p.intro") 选取所有 class="intro" 的

    元素。

  • $("p#demo") 选取所有 id="demo" 的

    元素。

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

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

实例：

  • $("ul li:first") 每个ul的第一个li元素
  • $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
  • $("div#intro .head") id="intro" 的
    元素中的所有 class="head" 的元素

3、jquery事件函数

事件处理方法是当触发事件时所调用的方法。简单例子：
$("button").click(function() {..some code... } )
如果有多个处理函数时，要把函数放在单独的一个js文件中，然后引入该js文件。

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

二、Jquery效果

1、隐藏，显示

隐藏使用hide，显示使用show，可以设定速度。 


$(selector).hide(speed,callback);
$(selector).show(speed,callback);

上面的callback就是操作完成之后将调用的函数 但我们通常视同toggle()实现两者的切换。 


$("button").click(function(){
  $("p").toggle();
});

2、淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

3、滑动

通过 jQuery，您可以在元素上创建滑动效果。 jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()

可以通过链接将多个效果操作链接在一起。 


$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
jquery可以抛掉多余的空行。 

HTML：
<div class="test">
<ul class="ulcls">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>
<br>
<p style="color: #0000cc">hello</p>
<p style="color: #0000cc">hello</p>
<button id="bt">测试</button>


 JS：
$(function() {
$('#bt').click(function() {
    $('.ulcls').toggle();
    $('p').append(',haibo');
});
});
--------EOF---------
微信分享/微信扫码阅读