三种定义JQuery预加载方法及JQuery选择器

jQuery页面预加载方法:

jQuery(document).ready(function(){
    alert("222");
});

jQuery(function(){

    alert("333");
});

$(function(){
    alert("444");
})

基本选择器:

    基本选择器是JQuery所有选择器的基础,通过元素的id属性、class属性、标签名称进行选择;

id选择器:(#id)根据id属性查找一个元素  例如:$("#div")
var a1=$("#div3").html();

类选择器:(.class)根据class属性查找元素  例如:$(".class")
$(".div2").html("你好啊");

标签选择器:(element)根据元素标签名查找所有元素  例如:$("div")
var a=$("div").html();

基本过滤器:
    :first 选取第一个元素 $("tr:first")
    :last 选取最后一个元素 $("tr:last") 
    :not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
    :even 选取所有元素中偶数索引的元素,从0开始计数 $("tr:even"),显示奇数 
    :odd 选取所有元素中奇数索引的元素,从0开始计数 $("tr:odd") ,显示偶数 
    :eq(index)选取指定索引的元素 $("tr:eq(1)") 
    :gt(index) 选取索引大于指定index的元素 $("tr:gt(0)") 
    :lt(index) 选取索引小于指定index的元素 $("tr:lt(2)") 
    :header 选取所有的标题元素 如: h1, h2, h3 $(":header")

举例:

$("tr td").css("color","red");
$("tr:first").css("color","blue");
$("tr>td").css("color","yellow");//tr里的下一代全部
$("table+p").css("color","yellow");//table下临近的一个p标签 相邻兄弟
$("table~p").css("color","yellow");//table 下所有p标签
$("tr:last").css("color","blue");
$("tr:not(.1)").css("color","blue");//class里没有只是1的tr变为蓝色
$("tr:even").css("color","blue");//基数变色
$("tr:odd").css("color","blue");//偶数变色
$("tr:eq(0)").css("color","pink");//索引为几
$("tr:gt(0)").css("color","pink");大于索引为0的所有行
$("tr:lt(2)").css("color","pink");小于索引为2的所有行
$(":header").css("color","pink");//h1-h6标签
$("div:contains(1)").css("color","pink");//div中含文本(text) 为1的
$(".div4:empty").html("xixi").css("color","pink");//空的赋值  然后给颜色
$("div:has(a)").css("color","pink");
$("p:parent").css("color","pink");

层次选择器:
    是根据DOM元素的层级关系,通过后代元素、子元素、兄弟元素进行选择 ;
    1. ancestor descendant 获取ancestor元素下边的所有元素 $("form input")
    2. parent > child 获取parent元素下边的所有直接child子元素 $("form > input")
    3. prev+ next 获取紧随pre元素的后一个兄弟元素 $("label + input")
    4. prev~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input") 

内容过滤器:

 

可见度过滤器:
  

1.var a=$("form input:hidden").addClass("ss");
//添加一个class属性
         
2.var b=$("div:hidden").show();
//把隐藏文本的展示出来
            
3.$("div:visible").css("color","red");
//把展示出来的内容添加样式

属性过滤选择器:

    通过元素的属性来选取相应的元素;

[attribute] 选取拥有此属性的元素  $("div[id]")

[attribute=value] 选取指定属性值为value的所有元素

[attribute !=value] 选取属性值不为value的所有元素

[attribute ^= value] 选取属性值以value开始的所有元素

[attribute $= value] 选取属性值以value结束的所有元素

[attribute *= value]  选取属性值包含value的所有元素

[selector1] [selector2]…[selectorN] 复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合

举例:
    
1.$("form input[name='username1']").addClass("a");
//name为username1的添加一个class="a"
 
2.$("form input[name!='username1']").addClass("a");
//除了name为username1的都添加一个class="a"
    
3.$("form input[name*='username'][id]").addClass("a");
//name中含有username并且有id属性的添加
    

子元素过滤选择器:

    对某元素中的子元素进行选取;

:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素  ----- index 从1开始 区别 eq

:first-child  选取第一个子元素

:last-child  选取最后一个子元素

:only-child 选取唯一子元素,它的父元素只有它这一个子元素

表单过滤器:

    选取表单元素的过滤选择器;

:input  选取所有<input>、<textarea>、<select >和<button>元素

:text     选取所有的文本框元素

:password 选取所有的密码框元素

:radio          选取所有的单选框元素

:checkbox  选取所有的多选框元素

:submit       选取所有的提交按钮元素

:image        选取所有的图像按钮元素

:reset          选取所有重置按钮元素

:button       选取所有按钮元素

:file             选取所有文件上传域元素

:hidden       选取所有不可见元素

举例:
var a=$(":input").val();
    alert(a);      
   
var b=$(":text").val();
    alert(b); 
    
$(":button").click(function(){
    alert("sssss");//属性过滤器触发事件
})
    
var b=$(":radio").val();
    alert(b);
$(":input").addClass("test");

表单对象属性过滤选择器:

    选取表单元素属性的过滤选择器;

:checked  选取所有被选中的元素,如单选框、复选框

:selected  选取所有被选中项元素,如下拉列表框、列表框

举例:
    checked:
        
var a=$("input[name='username']:checked").val();
$("input[name='username']:checked").each(function(){
    var c=$(this).val();
    alert(c);
}) 
            
$("input").each(function(){
    var c=$(this).val();
    alert(c);
})


    selected:
$("#xx").change(function(){
    var a=$("select option:selected").val();// 1  2  3
    var b=$("select option:selected").text();//佳佳 小曼 老狼
    alert(a);
    alert(b);
}) 

Jquery的dom操作

设置或获取HTML、文本和值:
    获取html 文本 值:
        /* var a=$("#111").html();//显示全部内容
alert(a); */
/* var a=$("#111").text();//只显示文本内容
alert(a); */
/* var a=$("#id_1").val();//获取value值
alert(a); */
            
    赋值html 文本 值:
        //覆盖之前div里的内容,重新赋值 :点击
//$("div").html("<a href='#'>点击</a>");

//覆盖之前的div里的内容,展示写进去的内容:<a href='#'>点击</a>
//$("div").text("<a href='#'>点击</a>");
//$(":hidden").val(id);

文档对象属性操作:

获取一个元素的属性  jquery对象.attr(属性名)

为一个元素的属性赋值  jquery对象.attr(属性名, 属性值)

删除一个属性 jquery对象.removeAttr(属性名)

attr({key :value, key :value...}) 同时设置多个属性

举例:


//$("#id_1").attr("class","test");
//$("#id_1").attr({"class":"test","name":"user"});
    //文档对象css样式操作
/* $("#id_1").addClass("test");//添加一个class
$("#id_1").removeClass("test");删除一个class */
//$("#id_1").toggleClass("test");//如果有class就删除,没有就添加

文档DOM对象 增删改查:

内部添加:append/appendTo
    
添加方法1:
$("#se").append("<option value='4'>天津</option>");
    
添加方法2:
var a="<option value='5'>西藏</option>";
    $(a).appendTo("#se"); 
    
预添加,添加在第一个
$("#se").prepend("<option value='6'>河北</option>");

外部添加:
    
添加在第一个之前
$("select option[value='1']").before("<option value='7'>黑龙江</option>");
    
添加在第二个之后
$("select option[value='2']").after("<option value='8'>海南</option>");

删除节点:remove/empty/detach
    
$("#1").remove();//删除节点,标签一起删除
    
var b=$("#2").empty();//清空子节点,只删除文本内容,标签保留
alert(b);
    
var a=$("#2").detach();
    alert(a); 
    不同点
$("#jj").click(function(){
    alert("1");
}) 
    1:
     var a=$("#jj").detach();//不删除事件,删除之后click事件还存在
    alert(a);
    $("body").append(a); */
    2:
    var a=$("#jj").remove();
    $("body").append(a); //删除之后事件也删除*/

替换节点:replaceWith/replaceAll
    
$("#jj").replaceWith("#cc");//旧节点替换成新节点
    
var a="<p id='zz'>啧啧</p>";
$(a).replaceAll("#cc");//新节点替换之前的旧节点

克隆:clone
    clone克隆
$("#jj").click(function(){
    alert(11);//只弹出11警告框
})
$("#jj span").click(function(){
    alert(22);///点span先弹出22警告框,再弹出11警告框
})
        
clone克隆
var a=$("#jj");
$("#jj").after(a.clone(false));//false是不可以克隆事件
$("#cc").replaceWith(a.clone(true));//true是克隆事件

Jquery中事件

关于jquery事件与传统的事件区别

         传统的事件只能绑定一个函数;

         Jquery事件可以绑定多个函数;

事件处理:

click: 
事件绑定方式
1:给xixi绑定事件
 $("#xixi").click(function(){
    alert("ok");
 }) 


bind:     
2:使用bind绑定
 $("#xixi").bind("click",function(){
  alert("okok");
 })


unbind:     
 $("#xixi").unbind();//解除绑定 

事件委派:
    live:
        
绑定事件
$("#xixi").live("click",function(){
    alert("okok");
 })
    die:
$("#xixi").die();//解除绑定

事件:
    blur: 
$("#id_1").blur(function(){
    alert("aa");//失焦
})
            
    focus:    
$("#id_1").bind("focus",function(){
    alert("bb");//聚焦
})


    change:  
$("select").bind("change",function(){
    alert("bb");
})
$("select").change(function(){
    alert("bb");
}) 


    submit:
$("form").submit(function(){
    alert("aaa");
    return false;
})

event对象:

stopPropagation();
阻止事件传播:


阻止事件默认动作
事件的传播
 $("#jj").bind("click",function(){
     alert(111111);
})
         
$("span").click(function(e){
    e.stopPropagation();//阻止事件传播
    alert(2222);
 })

猜你喜欢

转载自blog.csdn.net/qq_43154385/article/details/85059939
今日推荐