jQuery选择器、元素属性操作--jQuery基础知识点(1)

一、jQuery代码风格:

1. $(document).ready(function(){})可简写为$(function(){})其在页面框架下载完毕后就执行;而window.οnlοad=function(){}必须在页面全部加在完毕(包含图片下载)后才能执行。很明显前者的执行效率高于后者。
2. 在jQuery选择器定位页面元素时,无须考虑定位元素在页面中是否存在,即使不存在,浏览器也不会报错!

二、jQuery选择器:

1. 基本选择器:效率: $("#id") > $("element") > $(".class") > $("*")
2. 层次选择器:例:$("div span") 例:$("#divMid").siblings("div")
3. 过滤选择器:例:$("#select option:selected")  $("li:nth-child(2)")
(1)简单过滤选择器【:first、:last、:not、:even、:odd、:eq、:gt、:lt、:header、:animated】
(2)内容过滤选择器【:contains、:empty、:has、:parent】
(3)可见性过滤选择器【:hidden、:visible】
(4)属性过滤选择器【[attribute=value]、[attribute!(^,$,*)=value]】
(5)子元素过滤选择器【:nth-child(eq|even|odd|index)、:first-child、:last-child、:noly-child】
(6)表单对象属性过滤选择器【:enabled、:disabled、:checked、:selected】
4. 表单选择器:例:$("#form1 :input") 例:$("#form1 :password")

三、 jQuery元素属性操作:

1. DOM(Document Object Model,文档对象模型)
2. 通过该函数返回的值作为元素的属性
    attr(key,function(index))
    例:$("img").attr("src",function(){ 
         return "Images/img0" + Math.floor(Math.random()*2+1)+".jpg"
            }); 
3. $("select").val().join(","); //获取列表框中全部被选中的选项值
    $(":radio").val(["radio2","radio3"]); //value值为radio2和radio3的单选框被选中
4. toggleClass(class); //元素中含有名称为class的CSS类别时,删除该类别,否则增加一个该名称的CSS类别
5. 动态创建节点:$(html)
    var $div = $("<div title="jQuery学习">加油</div>");
    $("body").append($div);
    等价于:$($div).appendTo($("body"));
6. clone()&clone(true)
    clone()被复制后的元素以不具有任何元素的行为
7. replaceWith(content)&replaceAll(selector)
    $("#id").repalceWith("<span>ligang</span>"); //后者替换前者
    $("<span>ligang</span>").replaceAll("#id"); //前者替换后者
8. wrap()&wrapInner()
    $("p").wrap("<b></b>"); //包裹在p标签外<b><p></p></b>
    $("span").wrapInner("<i></i>"); //span内的内容被i标签包裹<span><i></i></span>
9. $("img").each(function(index){})  //index下标从0开始
10. remove()&empty()
      empty(); //只移除了指定元素中的所有子节点
      remove([expr]); //把其从dom中删除,而不会保留其所占的位置
      <p>Hello</p>
     $("p").empty(); //结果:Hello
     $("p").remove(); //结果:p标签也被删除
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋飛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值