JQuery基础(1)

一、 文档就绪事件

  在JQuery中所有的代码都是放在“文档就绪事件”中;
  $(document).ready(function(){
    // 开始写 jQuery 代码...}
  );
  简洁写法:
  $(function(){
    // 开始写 jQuery 代码...}
  );

  二、选择器
  jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
  基础语法: $(selector).action()

  美元符号定义 jQuery
  选择符(selector)"查询"和"查找" HTML 元素
  jQuery 的 action() 执行对元素的操作
  Query 中所有选择器都以美元符号开头:$()。
  JQuery中选择器是个重要的知识点,多种多样的选择器。

  1. id选择器(以#开关):
    $("#test").hide() - 隐藏所有 id="test" 的元素;

  2. 类名选择器(以.开头):
    $(".test").hide() - 所有带有 class="test" 属性的元素都隐藏;

  3. 标签(种类)选择器:
    $("p").hide() - 隐藏所有<p>标签;
    $("p.classname") - 选取class为classname的<p>元素;
    $("p:first") - 选取第一个 <p> 元素;

    $("ul li:first") - 选取第一个 <ul> 元素的第一个 <li> 元素;
    $("ul li:first-child") - 选取每个 <ul> 元素的第一个 <li> 元素;

    $(":button") - 选取所有 type="button" 的 <input> 元素 和 <button> 元素;

    $("tr:even") - 选取偶数位置的 <tr> 元素
    $("tr:odd") - 选取奇数位置的 <tr> 元素

  4. 属性选择器([attr])
    $("[href]") - 选取带有 href 属性的元素;
    $("a[target='_blank']") - 选取所有 target 属性值等于 "_blank" 的 <a> 元素
    $("a[target!='_blank']") - 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

  5. 特殊选择器
    $("*") - 选取所有元素;
    $(this) - 选取当前 HTML 元素;

三、事件

  和JavaScript不同的是JQuery不需要加"on",例如:JavaScript中onClick,JQuery中click就行了。

  实例:$("p").click(function(){
      $(this).hide();
        });
  1. 常用事件

    click - 当点击元素时,会发生 click 事件。

    dblclick - 当双击元素时,会发生 dblclick 事件。

    mouseenter - 当鼠标指针穿过元素时,会发生 mouseenter 事件.

    mouseleave - 当鼠标指针离开元素时,会发生 mouseleave 事件.

    mousedown - 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.

    mouseup - 当在元素上松开鼠标按钮时,会发生 mouseup 事件.

    hover(fun1,fun2) - hover()方法用于模拟光标悬停事件,类似于mouseenter事件和mouseleave事件的结合
      fun1:指定鼠标移到元素内的事件;
      fun2:指定鼠标移出元素外的事件;

    focus() - 当元素获得焦点时,发生 focus 事件.

    blur() - 当元素失去焦点时,发生 blur 事件.

    更多事件详看:https://www.runoob.com/jquery/jquery-events.html

猜你喜欢

转载自www.cnblogs.com/gb-mybaits/p/JQuery.html