Menu
Woocommerce Menu

选择器详解,Javascript基础教程之比较操作符

0 Comment

和其他语言一样,JavaScript也有条件语句对流程上进行判断。包括各种操作符合逻辑语句

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:

  $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是.

比较操作符

此方法可以在匹配元素上绑定一个或者多个事件处理函数。
使用off()方法可以删除on()方法绑定的事件。

  $(“#id”)通过id来获取元素,用来代替document.getElementById()函数.

常用的比较操作符有      等于 == ,  不等于!= , 大于 >, 小于
<,大于等于 >= ,小于等于 <=

语法结构一:

  $(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数.

复制代码 代码如下:

复制代码 代码如下:

  jQuery的基本语法是:$(selector).action(), selector即选择器.

    document.write(“Study” == “study”);//false
    document.write(“Study” < “study”); //false
    document.write(“Study”.toUpperCase())//STUDY
    document.write(“Study”.toLowerCase() ==
“study”.toLowerCase()+”<br>”);//true
利用toLowerCase()和toUpperCase()进行大小写转换

$(selector).on(events,[selector],[data],fn)

jQuery选择器的分类

以上就是关于javascript比较操作符的相关内容了,希望小伙伴们能够喜欢

参数列表:

  jQuery的选择器基本可以分为四大类:

您可能感兴趣的文章:

  • 全面解析JavaScript中“&&”和“||”操作符(总结篇)
  • 浅谈javascript中new操作符的原理
  • JavaScript中的操作符类型转换示例总结
  • JavaScript中的各种操作符使用总结
  • 总结JavaScript中布尔操作符||与&&的使用技巧
  • js中的内部属性与delete操作符介绍
  • JavaScript中诡异的delete操作符
  • javascript中typeof操作符和constucor属性检测
  • javascript操作符”!~”详解
  • JS之相等操作符详解
参数 描述
events 一个或多个用空格分隔的事件类型和可选的命名空间。
selector 可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。
如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
data 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn 该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false。

  基本选择器(basic)

实例代码:

  层次选择器(level)

实例一:

  过滤选择器(filter)

复制代码 代码如下:

  表单选择器(form)

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
div{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“div”).on(“click”,function(){
    $(this).text(“脚本之家欢迎您”);
  })
})
</script>
</head>
<body>
<div>原来内容</div>
</body>
</html>

  有些类别又可以分为具体的子类别.

以上代码为div绑定一个click事件,点击div时候能够为div设置新的文本内容。

基本选择器

实例二:

图片 1

复制代码 代码如下:

  * 匹配所有元素.示例:$(“*”)选取所有元素.

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
div{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“div”).on(“click mousemove”,function(){
    $(this).text(“脚本之家欢迎您”);
  })
})
</script>
</head>
<body>
<div>原来内容</div>
</body>
</html>

  #id根据给定的id匹配元素(最多只返回一个元素).示例:
$(“#lastname”)选取id=”lastname”的元素.

以上代码为div绑定了两个事件,无论是点击div还是在div中移动鼠标都会为div设置新的文本内容。

  .class根据给定的类名匹配元素.示例:$(“.intro”)选取所有class=“intro”的元素.

实例三:

  element根据给定的元素名匹配元素.示例: $(“p”)选取所有<p>元素.

复制代码 代码如下:

  .class.class 示例:
$(“.intro.demo”)选取所有且class=”demo”的元素.(交集).

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>脚本之家</title>
<style type=”text/css”>
div{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  var newtext=”这是新文本”
  $(“div”).on(“click”,{“mytext”:newtext},function(e){
    $(this).text(e.data.mytext);
  })
})
</script>
</head>
<body>
  <div>原来内容</div>
</body>
</html>

  selector1, selector2, …, selectorN,
将每一个选择器匹配到的元素合并后一起返回.(并集).

以上代码利用data参数为绑定的事件处理函数传递数据。

  除了#id选择器返回单个元素外,其他选择器返回的都是元素集合.

实例四:

  这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑.

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图