选择器章节的笔记以及层级选择器的实现和测试

原创 2019-04-03 13:57:38 309
摘要:关于选择器相关的笔记如下========================== jQuery的基本选择器=====================1. id ——  $( ‘#id’ )2.class——$( ‘.class’ )3.元素——$(‘element’)4.所有元素——$( ‘*’ )5.页面中多个选择器 ——$(‘#id , .class , element’)=======

关于选择器相关的笔记如下

========================== jQuery的基本选择器=====================


1. id ——  $( ‘#id’ )

2.class——$( ‘.class’ )

3.元素——$(‘element’)

4.所有元素——$( ‘*’ )

5.页面中多个选择器 ——$(‘#id , .class , element’)



========================== jQuery的层级选择器=====================



父亲下的所有子元素 $( ‘ father > child ‘ )

父亲下的所有后代元素 $( ‘ father  child ‘ )

紧跟在prev后的next元素 $( ‘ prev + next ‘ )——同级的元素

在prev后所有的siblings元素 $( ‘ prev~ siblings ‘ ).  //局限比较小


========================== jQuery的顺序选择器=====================



1. 顺序

$( ‘ :first ‘ ) 第一个元素

$( ‘ :last ‘ ) 最后一个元素


2.比较

$( ‘ :gt(x) ‘ ) 大于x 的元素

$( ‘ :lt(x) ‘ ) 小于x 的元素

$( ‘ :wq(x) ‘ ) 等于x 的元素


3.奇偶数  //0开始

$( ‘ : odd‘ ) 奇数顺序(对奇数行进行操作)

$( ‘ : even‘ ) 偶数顺序(对偶数行进行操作)

4.非

$( ‘ : not(selector)‘ ) 不是这个值的所有


========================== jQuery的内容选择器=====================


$ ( ‘:  contains(text)’ ) ——匹配包含给定文本的元素

$ ( ‘ : has(selector)’ )——匹配包含特定选择器元素的元素

$ ( ‘ : empty ’ ) ——空元素

$ ( ‘:  parent ‘ )——含有子元素或者文本的元素


========================== jQuery的属性选择器=====================


找什么样的元素?

这里所说的attribute和value都是html的标签中的内容

例如,如果type = button

则type是attribute,button是value

[ ]外面是标签的名字


$( ‘ [ 属性名 ] ‘ ) ——包含给定属性

$( ‘ [ attribute = value ] ‘ )——给定属性是某个特定值 

$( ‘ [ attribute != value ] ‘ )——不含有属性 / 属性不等于特定值

$( ‘ [ attribute ^= value ] ‘ ) ——以特定值开始

$( ‘ [ attribute $= value ] ‘ )——以特定值结尾

$( ‘ [ attribute *= value ] ‘ )——包含某些值

$( ‘ attrSel[1] attrSell[2] attrSel[3] ‘ )——复合选择器,需要同时满足多个条件时使用


========================== jQuery的表单选择器=====================



$( ‘ : enabled ‘ )  —— 所有可用的input元素

$( ‘ : disabled ‘ ) ——所有禁用的input元素。//不可以被使用。input标签中有disabled

$( ‘ : selected ‘ ) —— 所有被选中的元素,针对于select元素

select标签嵌套option标签。option中默认被选中的就是<option selected> 针对下拉列表中的元素

$( ‘ : checked ‘ )  ——所有被选中的input元素

针对多选框。这个后面需要加【 .parent】才能找到内容,对其更改。

input标签,type = checkbox。

默认被选中,写一个checked




一个小的测试如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>JQ基础语法</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style type="text/css">


</style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

$('ul>li').css('list-style','none');

$('ul li').css('list-style','none');

$('label+input').css('height','50px');//同级紧跟着的元素,不怎么常用

$

})

</script>

<ul>

<li>1</li>

<li>2</li>

<div>

<li>nihao</li></div>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<form>

<label>姓名</label>

<input type = "">

</form>


</body>

</html>


批改老师:查无此人批改时间:2019-04-03 17:39:44
老师总结:完成的不错。jq比js简单很多,用心学,可以先代替js写页面。继续加油。

发布手记

热门词条