博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery学习笔记一
阅读量:6822 次
发布时间:2019-06-26

本文共 2125 字,大约阅读时间需要 7 分钟。

hot3.png

。jQuery引入的方式:

1。下载文件后,直接引入:<script src="jquery.js"> </script>

2。直接从谷歌引入:

或者从微软引入:

还可以从百度引入:

二。获取元素的方法

  1. 获取当前的元素:$(this);

  2. 获取id:$("#idname");

  3. 获取标签数组(改:集合):$("div")-->这里讲数组,其实是不正确的。获取的其实只是一个集合,并不是数组。一开始我以为它是数组,是因为它有length,但当我调用它的第一个元素的时候,用$("div")[0]却是不行的。其实JQ里面的对象都有length的属性,所以,不是有length的都是数组。

    不能用数组的方式选择想操作的元素,但JQ提供了更为丰富的选择器:详细的在这里:http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp JQ遍历函数

    其中常用的:第一个可用:$("div").first()

                         最后一个用可:$("div").last()

                        倒数第二个可用:$("div").end()

                        eq(i) 返回第i个元素,类似数组,从0开始计算;

                       第三个可用:$("div").slice(2,3)  用slice()可以选择集合里任一个元素,其中slice(a,b),表示从第a个开始(不包括a)到第b个结束;同时从1开始,而不是从0开始算。

  4. 获到class元素:$(".classname")

   而JS中,获取元素有四种方式:document.getElementById("idname");

                                                   document.getElementsByClassName("classname");

                                                  document.getElementsByTagName("div");

                                                  document.getElementsByName  ("name");(很少用,一般用在input类)

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。 //这个有点多余。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例
$("p").css("background-color","red");

三。加载页面元素时(后)执行函数:

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

可简写成:$(function( ){ } );

js中的window.οnlοad=function(){ }

相当于jq中的:$(window).load(function(){ });

具体区别可以参考:

jq中除了喜欢用$之外,还有很多的小括号,这有点不太适应!

还有,有些地方JS中用点(属性),而JQ中用括号(调用方法)

注:有些地方讲到:$(document).ready(function(){})是在页面加载时执行函数,但我也看到多处说到是页面加载完成时执行。我觉得后者更为可靠。

比如:

。onclick与click等语法上不同:

JS 中隐藏当前元素:this.style.display="none"; display="block";

JQ中用:$(this).hide();  $(this).show();

onmouseover与mouseover

onmouseout与mouseout

onfocus与focus

另外,注意:mouseover与mouseenter的区别:

给父元素设置事件的时候,当鼠标经过父元素和子元素,都对调用mouseover的函数;而mouseenter在经过子元素的时候不会调动你元素的函数。

mouseout与mouseleave的区别也类似。

这里也实例:

还有其它很多有些区别的,这里不一一列举了。

事件中,hover比较特殊,它是包括两个函数的:第一个是鼠标移入时执行,第二个是移出时执行;两函数中间用逗号隔开。

比如:

$("#p1").hover(function(){  alert("You entered p1!");  },  function(){  alert("Bye! You now leave p1!");});

若是简单的CSS样式的改变,可以直接通过CSS样式来设置。

      

转载于:https://my.oschina.net/agui1989/blog/474815

你可能感兴趣的文章
从dist到es:发一个NPM库,我蜕了一层皮
查看>>
Python实现二叉树相关算法
查看>>
Linux中用户管理
查看>>
CSS实用技巧干货
查看>>
APT案例之点击事件
查看>>
分布式系统的Raft算法
查看>>
爱可生开源社区官网正式发布啦!
查看>>
猫头鹰的深夜翻译:微服务概述
查看>>
Python易学就会(二)import的用法
查看>>
俄罗斯方块游戏——pyqt5
查看>>
Java™ 教程(匿名类)
查看>>
用Promise构造函数来解决地狱回调问题
查看>>
那些让程序员崩溃又想笑的程序命名...
查看>>
[LeetCode] 404. Sum of Left Leaves
查看>>
初探APT 攻击
查看>>
react 使用ant design UI 父组件this.refs无法调用子组件自定的方法
查看>>
dubbo源码解析(三)注册中心——开篇
查看>>
Elasticsearch 参考指南(Index API)
查看>>
Git 使用指南
查看>>
好的代码可以自己说话!
查看>>