04-JQuery

1、JQuery 基础

JQuery:JavaScript 的一个类库,对常用的方法和对象进行封装,方便我们使用。

JQuery 是单独的 js 文件,通过 script 标签的 src 属性导入即可。

获取一个 jquery 对象,格式:$("选择器") 或者 jQuery("选择器")

dom 对象和 jquery 对象之间的转换:

  • dom 对象 ===> jquery 对象:$(dom对象)
  • jquery 对象 ===> dom对象:① jquery对象[index]、② jquery对象.get(index)

页面加载:(认真看下)

JS 中:window.onload=function(){} 在一个页面中只能使用一次
JQuery 在一个页面中可以使用多次:方式① $(function(){...})、方式② $(document).ready(function(){});

PS:$(document).ready() 和 window.onload 等几个的区别?

1、JS 中,常见:window.onload 如:

1
2
3
window.onload = function(){ 
alert(“text1”);
};

等同于JQuery中

1
2
3
$(window).load(function(){
alert("text1");
});

他们都是用于当页面的所有元素,包括外部引用文件,图片等都加载完毕时运行函数内的 alert 函数。load 方法只能执行一次,如果在 js 文件里写了多个,只能执行最后一个。

2、另外:由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完,例如与图片有关的HTML下载完毕,并且已经解析为 DOM 树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题,可以使用 JQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。如:$(window).load(function(){ }) 等价于 window.onload = function(){ }…

3、在 JQuery 中,可以写 $(document).ready(function(){ }) 等同于(简化写法为):$(function(){ }) 他们都是用于当页面的标准 DOM 元素被解析成 DOM 树后就执行内代码。这个函数是可以在 js 文件里多次编写的,对于多人共同编写的js 就有很大的优势,因为所有行为函数都会执行到。而 $(document).ready() 函数在 HMTL 结构加载完后就可以执行,不需要等大型文件加载或者不存在的连接等耗时工作完成才执行,效率高。

详细参考:$(document).ready() 和 window.onload 的区别

派发事件:

  • $("选择器").click(function(){...}); 相当于原生 JS 中 dom对象.onclick=function(){....}

  • 掌握:focus、blur、submit、change、click

jquery 中效果:

  • 隐藏或展示:show(毫秒数)、hide(毫秒数)
  • 滑入或滑出:slideDown(毫秒数):向下滑入、slideUp(毫秒数):向上滑出
  • 淡入或淡出:fadeIn(int):淡入、fadeOut(int):淡出

2、选择器

基本选择器:★

  • $("#id值")
  • $(".class值")
  • $("标签名")

了解:$("*")
理解:获取多个选择器 用逗号隔开 $("#id值,.class值")

层次选择器:★

  • a b:a的所有b后代
  • a>b:a的所有b孩子
  • a+b:a的下一个兄弟(大弟弟)
  • a~b:a的所有弟弟

基本过滤选择器:★

  • :frist 第一个
  • :last 最后一个
  • :odd 索引奇数
  • :even 索引偶数
  • :eq(index) 指定索引
  • :gt(index) >
  • :lt(index) <

内容过滤::has("选择器") 包含指定选择器的元素

可见过滤:

  • :hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中 display:none
  • :visible

属性过滤器:★

  • [属性名]
  • [属性名=”值”]

表单过滤::input 所有的表单子标签 input select textarea button

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

  • :enabled 可用的
  • :disabled 不可用
    :checked 选中的(针对于单选框和复选框的)
    :selected 选中的(针对于下拉选)

3、属性与CSS的操作

对属性的操作

attr():设置或获取元素的属性(jquery1.6版本之前)

  • 方式1:获取 attr("属性名称")
  • 方式2:设置一个属性 attr("属性名称","值");
  • 方式3:设置多个属性

    attr({

        "属性1":"值1",
        "属性2":"值2"
    })
    

prop()和 attr 用法一致(jquery1.6版本之后)

移除属性:removeAttr("属性名称")

addClass("指定的样式值"); 相当于 attr("class","指定的样式值");

removeClass("指定的样式值"); 移除指定的样式

对 CSS 操作

操作元素的 style 属性。

css(): 获取或设置 css 样式

  • 方式1:获取 css("属性名")
  • 方式2:设置一个属性 css("属性名","值")
  • 方式3:设置多个

    css({

        "属性1":"值1",
        "属性2":"值2"
    });
    

获取元素的尺寸:width()、height()

文档处理

内部插入:

  • a.append(c):将c插入到a的内部(标签体)后面
  • a.prepend(c):将c插入到a的内部的前面
  • appendTo
  • prependTo

外部插入:

  • a.after(c):将c放到a的后面
  • a.before(c):将c放到a的前面
  • a.insertAfter(c)
  • a.insertBefore(c)

删除:

  • empty() 清空元素
  • remove() 删除元素

其他:val html text

  • val:设置或者获取 values 属性
  • html:获取或者设置标签体内容
  • text:获取或设置标签体内容,但只是标签文本内容( 不带样式,有区别于 html )

    例如:
    <div id="d1"><a href="http://www.baidu.com/">百度</a></div>

    alert($("#d1").text()); 弹出的内容为 百度
    alert*($("#d1").text()); 弹出的内容为 <a href="http://www.baidu.com/">百度</a>

遍历数组:

  • 方式1:jquery对象.each(function(){});
  • 方式2:$.each(jquery对象,function(){});

在 jquery 中创建元素:$("<标签名>").prop(属性).html(内容)

觉得文章对您有帮助请我喝杯咖啡吧^_^
0%