jquery

基本选择器

什么是#id,element,.class,*,selector1, selector2, selectorN?

1).根据给定的id匹配一个元素,用于搜索,通过id的属性给定值。

案例:查找id为da3的元素

$("#da3");  结果:[

]

2).根据给定的元素名匹配所有元素

案例,查找div元素:

da1
da2

da3

$("div");  结果:[

da1
,
da2
]

3).根据给定的类匹配元素

dashu
da

$(".da");  结果:[da

]

4).匹配所有元素*

1

2

$("*");  结果:[

1
,

2

]

5).将每一个选择器匹配到的元素合并后一起返回:

$(".da, p, span");  结果:[

,

,]

6).层级选择器

2.后代选择器,子代选择器,next,siblings描述?

1).给祖先元素下匹配所有的后代元素

$("table input");  结果:[,]

2).给父元素下匹配所有子元素:

$("table > input");  结果:[]

3).匹配所有prev元素后的next元素:

$("p + input");  结果:[,]

4).匹配prev元素后的所有siblings元素:

找出同辈的元素

$("table ~ input");  结果:[]

基本选择器:?

:first  :last  :not  :even  :odd  :eq  :gt  :lt  :header  :animated

1).获取第一个元素

  • 1
  • 2

$("li").first();或$("li :first");

[

  • 1
  • ]

    2).获取最后一个元素

    • 1
    • 2
    $('li').last();

    $("li :last");

    [

  • 2
  • ]

    3).去除所有与给定选择器匹配的元素

    a).查找所有未选中的input元素

    $("input:not(:checked)")

    []

    b).匹配所有索引值为偶数的元素

    0
    1
    2

    $("tr:even")

    [0,2]

    c).匹配所有索引值为奇数的元素

    0
    1
    2

    $("tr:odd")

    [1]

    d).匹配一个给定索引值的元素

    0
    1
    2

    $("tr:eq(1)")

    [1]

    e).匹配所有大于给定索引值的元素

    0
    1
    2

    $("tr:gt(0)")

    [1,2]

    f).匹配所有小于给定索引值的元素

    0
    1
    2

    $("tr:lt(2)")

    [0,1]

    g).匹配标题元素

    1

    1

    2

    2

    $(":header");

    [

    1

    ,

    2

    ]

    h).匹配所有正在执行动画效果的元素

    4.内容选择器的描述?

    :contains  :empty  :has  :parent

    1).匹配包含给定文本的元素

    2).匹配所有不包含子元素或者文本的空元素

    3).匹配含有选择器所匹配的元素的元素

    4).匹配含有子元素或者文本的元素

    5.可见性选择器

    :hidden  :visible

    1)匹配所有不可见元素

    display:none      type="hidden"

    2).匹配所有的可见元素

    type="visible"

    6.属性选择器的描述?

    [attribute]

    [attribute = value]   匹配给定的属性是某个特定值的元素

    [attribute != value]   匹配所有不含有特定的属性

    [attribute ^= value]   匹配给定的属性以某值开始的元素

    [attribute $= value]   匹配给定的属性以某值结尾的元素

    [attribute *= value]    匹配有包含某些值的特定元素

    [selector1][selector2]    同时满足多个条件使用

    $("div[id]");

    [

    ]

    7.选择器-子元素有哪些?

    :nth-child  

    从1开始的,匹配父元素下第n个元素

    $("ul li:nth-child(2)");获取234。。

    :first-child

    匹配每个父元素下的第一个子元素

    :last-child

    匹配每个父元素下的最后一个子元素

    :only-child

    匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配

    8.表单元素有哪些?

    :input  会获取所有input,textarea,select,button

    :text  匹配所有单行文本元框

    :password  匹配所有密码框

    :radio  匹配所有单选按钮

    :checkbox  匹配所有复选框

    :submit  匹配所有提交按钮

    :image  匹配所有图像

    :reset  匹配所有重置按钮

    :button  匹配所有按钮

    :file  匹配所有文本域

    :hidden  匹配所有不可见元素

    选择器表单对象属性有哪些?

    :enabled  匹配所有可用元素

    :disabled  匹配所有不可用元素

    :checked  匹配所有选中元素

    :selected  匹配所有选中option元素

    9.选择器表单对象属性有哪些?

    :enabled  匹配所有可用元素

    :disabled  匹配所有不可用元素 

    :checked  匹配所有选中元素 

    :selected  匹配所有选中option元素

    10.在jquery中有哪些属性?

    attr(name);  获取属性值

    attr(properties);  以“名/值对”对象添加属性

    attr(key,value);  为所匹配的元素设置属性值

    attr(key,function(index,attr));  为所匹配的元素设置属性值

    removeAttr(name);  删除属性

    11.css 类属性有哪些?

    addClass(class);

    添加一个类名$("p").addClass("selected");

    addClass(function(index,class));

    添加类名$('ul li:last').addClass(function(){})

    removeClass([class]);

    删除指定类removeClass(function(index,class))

    删除指定类toggleClass(class);

    有切换效果,如果有这个属性值就删除如果没有就添加

    toggleClass(class,switch);

    switch为ture添加class,反之删除

    toggleClass(function(index,class),[switch]);

    switch为ture添加class,反之删除

    12.html代码?

    html()  获取html内容

    html(val)  设置html内容的值

    html(function(index,html));  设置html内容的值

    13.文本有哪些?

    text()  获取元素内容

    text(val)  设置内容文本

    text(function(index,text))  设置内容文本

    14.关于val有哪些?

    val()  获取元素的当前值

    val(val)  设置匹配元素的值

    val(array)  赋值作用

    val(function(index,value))  设置元素值

    15.过滤选择器

    eq(index):  获取第n个元素   $("p").eq(1)

    first(): 获取第一个元素   $('li').first()

    last():  获取最后一个元素   $('li').last()

    hasClass(class): 判断是否有给类

    filter(expr): 选出表达式匹配的元素

    is(expr):进行判断

    map(callback):$.map()

    has(expr):保留   .has()

    not(expr): .not()

    16.一些方法?

    children();  获取子元素

    find();  用于查找表达式

    next();  获取下一个元素

    nextAll();  获取下一个所有元素

    parent();  获取父元素

    parents();  获取所有匹配元素的祖先元素的集合

    prev();  获取前一个元素

    prevAll();  获取之前所有同辈元素

    siblings();   $("div").siblings()

    add(); 

     $("p").add("span")    

    $("p").add("da");

    da

    17.文档处理

    append()   中间插入

    $("p").append("

    ");

    appendTo();

    $("p").appendTo("div");

    prepend()   元素内部前置内容

    hello

    $("p").prepend("");

    hello

    $("p").prependTo("");

    after();   在后面追加

    before();   在前面追加

    $("p").insertAfter("#foo");

    da

    da

    $("p").insertBefore("#foo");

    18.请写出jquery的语法?

    $(function(){// 程序段})

    19.请问什么是DOM对象?

    DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。

    var  txt = document.getElementById("text").value;

    20.通过jquery自身的方法获取页面元素的对象,就是jquery对象。

    var  txt=$("#text").val();

    $("#text").toggleClass("txtClick").html("点击后切换样式");

    21.jquery选择器有哪些?

    jquery选择器有:

    基本选择器,层次选择器,过滤选择器,表单选择器四大类。

    过滤选择器分6种:

    简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象属性过滤选择器。

    基本选择器:

    #id   根据给定的id进行匹配一个元素

    element   根据给定的元素名进行匹配所有元素

    .class  根据给定的类匹配该类的所有元素

    *  匹配所有元素

    selector1,selector2   匹配给定的元素,合并一起

    22.请问你能写出dom结构吗?

    html下head,body

    head下title,style

    body下table,div,p,ul

    table下tr

    div下span

    ul下li

    23.给定属性操作,描述作用

    复制节点

    clone()复制元素本身;        clone(true)复制元素和所有功能

    $(this).clone().appendTo("span");      $(this).clone(true).apendTo("span");

    替换节点

    replaceWith(content)     将选择的元素替换成指定内容

    $("span").replaceWith("

    dashu

    ");

    replaceAll(selector)    将选择的元素替换成指定的selector的元素

    $("

    dashu

    ").replaceAll("#text");

    包裹节点

    wrap(html):  将所有选择的元素用其他字符串代码包裹起来

    wrap(elem):  将所有选择的元素用其他Dom元素包裹起来

    wrap(fn)

    unwrap()  移除所选元素的父元素或包裹的标记

    wrapAll(html),   wrapAll(elem)

    wrapInner(html),    wrapInner(elem)

    wrapInner(fn)

    wrap(html),    wrapInner(html);包裹外部元素包裹元素内部的文本

    da

    $("p").wrap("");

    da

    $("span").wrapInner("");

    da

    遍历元素

    each()方法    进行元素的遍历

    删除元素

    remove()   删除该元素

    empty()   清空全部节点或所有后代元素

    24.怎么阻止冒泡过程?

    stop  Propagation();   阻止冒泡过程

    25.ready()方法和onload()方法的区别?

    onload()方法要等页面中全部元素加载到浏览器中才执行,如果页面中存在大量图片,要等这些内容加载完毕。

    ready()方法只要页面的dom模型加载完毕即可,就会触发ready()。

    26.请写出ready()相同方法?

    $(document).ready(function(){});

    $(function(){});

    jQuery(document).ready(function(){});

    jQuery(function(){});

    27.bind()方法绑定事件有了解吗?

    bind(type,[data],fn);

    绑定类型: 

    blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,select,submit,keydown,keypress,keyup,error,mousemove,mouseover,mouseout,mouseenter,mouseleave,change

    $("#btn").bind("click",function(){});

    $(".txt").bind("focus",{msg:message},

    function(event){// 获取数据 event.data.msg });

    28.写出一个映射方式?

    $(function(){$(".txt").bind({focus:function(){};},{change:function(){}})})

    29.hover()方法和toggle()方法区别?

    $("a").hover(function(){// 执行一 }, function() { // 执行二 });

    hover(over,out)

    $("a").mouseenter(function(){});

    $("a").mouseleave(function(){});

    toggle()方法可以依次执行函数

    toggle(fn,fn2,fn3...);

    30.说明unbind()方法的使用?

    unbind()   可以移除元素的绑定事件

    unbind([type], [fn])

    移除全部事件unbind();

    31.one()方法和trigger()方法的使用?

    one()方法可以将所选选的元素绑定一个触发一次的处理函数

    one(type, [data], fn);

    trigger()自动执行,   triggerHandler()方法进行取消

    trigger()方法 trigger(type, [data]) 所选择的元素上触发指定事件

    32.请写出显示和隐藏效果代码?

    document.getElementById("p").style.display="block";

    document.getElementById("p").style.display="none";

    $("p").css("display":"block");

    $("p").css("display":"none");

    show()和hide()方法进行显示和隐藏

    show(speed,[callback]);

    hide(speed,[callback]);

    33.切换元素可见状态的方法?

    toggle()  方法如果显示状态,就变成隐藏状态,如果是隐藏状态,就变成显示状态。

    toggle()

    toggle(switch)switch为布尔值,true显示元素,反之隐藏

    toggle(speed,[callback])

    34.请写出滑动效果?

    slideDown()方法和slideUp()方法

    slideDown(speed,[callback])

    slideUp(speed,[callback])

    slideToggle(speed,[callback])  以动画效果切换所选择的元素

    35.请写出淡入淡出效果?

    fadeIn()与fadeOut()方法进行淡入淡出效果。

    fadeIn(speed,[callback])  实现淡入动画效果

    fadeOut(speed,[callback])  现实淡出的动画效果

    fadeTo()方法给定透明度值

    fadeTo(speed,opacity,[callback]);

    36.简单的动画效果?

    animate(params,[duration],[easing],[callback])

      $(function(){  $("p").click(function(){   

            $(this).animate({height: 100}, "slow")

                      .animate({width:100},"slow")    

                      .animate({height:50},"slow")    

                     .animate({width:50},"slow"); 

              }) })

    37.实现效果动画的停止和延时?

    stop([clearQueue],[gotoEnd])   停止正在执行的动画,

            clearQueue是布尔值,是否停止正在执行的动画,

            gotoEnd是布尔值,是否完成正在执行的动画。

    delay(duration,[queueName])    延时动画效果

    show()和hide()方法   实现动画效果的显示和隐藏

    slideUp()和slideDown()   实现“上下”的动画效果的显示和隐藏

    fadeTo()   实现指定的透明度的效果

    toggle()   方法进行切换效果,显示和隐藏

    slideToggle()   方法可以上下显示和隐藏的效果

    animate()   方法进行自定义元素的动画

    38.使用animate()方法

    $("p").animate({height:"hide",width:"hide",opacity:"hide"},300);

    $("p").hide(300);

    $("p").animate({opacity:"hide"},300);

    $("p").fadeOut(300);

    $("p").animate({height:"hide"},300);

    $("p").slideUp(300);

    $("p").animate({opacity:"0.8"},300);

    $("p").fadeTo(300,"0.8");

    你可能感兴趣的:(jquery)