复习之JQuery基本语法（二）——事件及函数

r囧r小猫 2022-05-09 05:28 215阅读 0赞

## $(function()\{\}) ##

表示文档结构已经加载完成后执行js代码

//$(function(){})其实是$(document).ready(function(){}) 的简写
    $(document).ready(function(){
      $("button").click(function(){
       
      });
    });

## $.each ##

JQuery遍历函数

//两种写法
    //第一种
    //mydata数据源
    //index - 选择器的 index 位置
    //element - 当前的元素（也可使用 "this" 选择器）
    $.each(mydata,function(index,element){
     });
    
    $(selector).each(function(index,element))

## parent() 父元素 ##

parent() 方法返回被选元素的直接父元素。  
该方法只会向上一级对 DOM 树进行遍历。  
下面的例子返回每个 span 元素的的直接父元素：

$("span").parent();

## JQuery选择、过滤 ##

：过滤符

//选择id为select1 中的option  过滤条件为被选择
    $("#select1 option:selected")
    //选择id为form-control3的除去第一个的所有option 执行删除操作
     $("#form-control3 option:not(:first)").remove();

更多过滤  
[http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp][http_www.w3school.com.cn_jquery_jquery_ref_selectors.asp]

## append()添加 ##

//表格添加一行
    $("table").append("<tr><td>"+user.username+"</td></tr>");

第二种形式

var $option=$("<option></option>");
                            $option.val(ablum.albumId);
                            $option.text(ablum.albumName);
                            $("#select1").append($option);

## click()点击事件 ##

$("button").click(function(){
    $("img").hide()
    })

## change事件 ##

$("#select1").change(function () {
    }

## 为元素添加事件 ##

$('div').on('click',function (event) {
                //event.stopPropagation(); //阻止冒泡
                console.log('click div')
            })

## 为元素移除事件 ##

//移除事件
            $('div').off('click mouseover');

[http_www.w3school.com.cn_jquery_jquery_ref_selectors.asp]: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp