22-[jQuery]-选择器, js jQuery对象转换
1、基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
</head>
<body> <div id="box">id选择器</div>
<div class="box2">类选择器</div>
<ul>
<li>路飞学城</li>
<li>路飞学城</li>
<li>路飞学城</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
//使用jQuery要有入口函数，回调函数
$(function () {
//1.id选择器 $('#box');
console.log($('#box'));
$('#box').css('color','red');
//设置一个值
$('#box').css('font-size','30px'); //2.类选择器 $('.box2')
// 设置多个值 设置多个值得时候使用对象存储 key:value
$('.box2').css({'color':'green','font-size':'34px'}); //3.标签选择器 $('li')
$('li').css({'background':'pink','font-size':'55px'}); //4.通配符选择器 * 使用不是很频繁
console.log($('*'))
//清空整个界面的dom元素
$('*').html('');
}) </script>
</html>
2、层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="https://www.luffycity.com">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li> </ul> <div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div> </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //1.后代选择器 div p $('#box p').css('color','red'); //2.子代选择器 div > p $('#box>p').css('color','yellow'); //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px'); //4.兄弟选择器 ~
$('#father~p').css('background','blueviolet'); console.log($('li')); //5.获取第一个元素
$('li:first').css('font-size','50px'); //6.获取最后一个元素 $('li:last').css('font-size','50px'); // 0 1 2 3
$('li:eq(3)').css('font-size','50px'); }) </script>
</html>
3、基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li> </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> $(function(){
//:first 获取第一个元素
$('li:first').text('真的吗？')
//:last 获取最后一个元素
$('li:last').html('我是最后一个元素？') //:odd 匹配所有索引值为奇数的元素，从0开始计数
$('li:odd').css('color','green'); //:even 匹配所有索引值为偶数的元素，从0开始计数
$('li:even').css('color','red') //:eq(index) 获取给定索引值的元素 从0开始计数
$('li:eq(1)').css('font-size','30px') //:gt(index)匹配所有大于给定索引值的元素
$('li:gt(1)').css('font-size','40px') //:lt(index) 匹配所有小于给定索引值的元素
$('li:lt(1)').css('font-size','40px') //一个给定索引值的元素
console.log($('p:eq(3)').text()) }) </script>
</html>
4、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function(){
// 标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); // 匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red') }) </script>
</html>
5、筛选选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法
console.log($('span').last());
$('span').last().css('color','greenyellow'); console.log($('span').parent('.p1'))
$('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'}); //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red') //.find()
//查找所有的后代元素
$('div').find('button').css('background','yellow') </script>
</html>
6.jquery对象和DOM对象转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery对象和Dom对象得转换</title>
<style type="text/css">
#box{ width: 200px; height: 200px;background-color: red;}
</style>
</head>
<body>
<div id="box">
天王盖地虎
</div>
<button>隐藏</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> // Dom --》 jquery
var oDiv = document.getElementById('box');
console.log(oDiv);
console.log($(oDiv)); $(oDiv).click(function () { // 回调函数
alert(111)
}); // jquery --》 dom
console.log($('button'));
console.log($('button')[0]);
console.log($('button').get(0)); var isShow = true;
$('button')[0].onclick = function () {
// alert(222)
if(isShow){
$(oDiv).hide();
// this.innerText = '显示'
// console.log($(this))
$(this).text('显示');
isShow = false;
} else{
$(oDiv).show();
$(this).text('隐藏');
isShow = true;
}
} </script>
<!--
总结：
DOM对象转换成jquery对象
var box = document.getElementById('box');
console.log($(box)); .click jquery对象转化成DOM对象
第一种方式：
$('button')[0] .onclick 第二种方式：
$('button').get(0) .onclick -->
</html>
22-[jQuery]-选择器, js jQuery对象转换的更多相关文章
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- 对比js库分枝Jquery和js获取对象的方式
一.Jquery和JS的认识 对于这点不谈详细,但能有一个能有一个全面的印象,Jquery本质上也是JS,只不过用一句话概括就是 “write letter and do more”,写的更少,做 ...
- jQuery入门、jQuery选择器、jQuery操作
一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
- jquery.cookie.js——jquery的cookie插件
一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- JS 将对象转换成字符 字符串转换成json对象
//js对象 var user = { "name": "张学友", "address": "中国香港" }; //将对 ...
- 13 -3 jquery选择器和 jquery动画
一 选择器: 1 基本选择器 例子: <!--id 类 标签--> <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- The operation names in the portType match the method names in the SEI or Web service implementation class.
The Endpoint validation failed to validate due to the following errors: :: Invalid Endpoint Interfac ...
- [翻译] NSImage+HHTint - Tints grayscale images using CoreImage
NSImage+HHTint - Tints grayscale images using CoreImage https://github.com/gloubibou/NSImage-HHTint ...
- 使用CoreData [2]
使用CoreData [2] 此篇讲解CoreData处理关系型数据. 1. 先创建出Student于Teacher的实体. 2. 确定关系,并修改描述 3. 创建对象,并查看一下关系(Teacher ...
- AppHangB1：explorer进程停止与Windows交互
现象:Windows 7,打开 “计算机” 的时候,资源管理器卡死,如图所示. 解决方法:卸载 CAD迷你看图软件,利用 CCleaner 清除注册表.
- 个人作业——APP案例分析
APP--饿了么:平台--Android 第一部分 调研, 评测 1 个人上手体验 首先送上APP截图一张: 相信很多学生都用过这个APP了,第一次使用都是因为新用户有大额的满减优惠才下载这个APP使 ...
- 用asp连接Access数据库 制作简单登陆界面
[题外话:最近做Internet作业,在这写一个适合初学入门的ASP连接ACCESS数据库做登陆界面的简单的例子,以慰藉我一口气把以前做过的系统中的PHP代码全改成ASP代码来临时应付作业的心情... ...
- python中pandas里面的dataframe数据的筛选小结
pandas大家用的都很多,像我这种用的不够熟练,也不够多的就只能做做笔记,尽量留下点东西吧. 筛选行: a. 按照列的条件筛选 df = pandas.DataFrame(...) # suppos ...
- Oracle-本地连接没问题，远程连接有问题解决方式
1. 问题 我的环境是oracle11gr2,本地用plsql还是toad连接都没有不论什么问题,而用别的机器远程连接就提示 无监听程序等错误. 2. 原因 oracle安装路径 --- 比如: F ...
- CentOS 7.4 yum安装LAMP环境
配置防火墙,开启80.3306端口.CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. #停止firewall服务 systemctl stop firewa ...
- css3动画效果小结
css3的动画功能有以下三种: 1.transition(过度属性) 2.animation(动画属性) 3.transform(2D/3D转换属性) 下面逐一进行介绍我的理解: 1.transiti ...