Web前端-关于jQuerry
jQuery-The write less,do more,jacascript library
非常方便的js库，封装了许多有用的功能。
1.jq与js对象之间的转换
<script>
// js对象转换为jq对象
var v=document.getElementById("div1");//js对象
var $jqv=$(v);//jq对象。变量名字前边加$是为了标明是jq对象 //jq对象->js对象
var $jqv=$("#div1"); //类选择器获得jq对象
var jsv=$jqv.get(0);//第一种方法
// var jsv=$jqv[0];//第二张方法
</script>
2.jq的选择器（列举了几个最常用的，可看jQuerry参考手册）
<script>
// 1.元素选择器
$("#div1") //id为div1的元素
$(".group")//class为group的元素组合
$("p")//所有<p>元素
$("p.group")//id为group的<p>元素
// 2.css选择器
$("p").css("background-color","red"); //设置css样式
// 3.属性选择器
$("[href]") //选取带有href属性的元素
$("[href='#']")
$("[href!='#']")
$("[href$='.png']") //选取href属性以png结尾的元素
// 4.层级选择器
$("p > span") // 子元素选择器: $(“选择器1” > “选择器2”) 选取p的子标签中为span的标签
$("p span") // 子孙选择器: $(“选择器1” (空格) “选择器2”)选取p的子孙标签中为span的标签
$("p + span")// 兄弟选择器（同级选择）: $(“选择器1” + “选择器2”) 选取p后边的第一个为span的标签
$("p ~ span"") // 所有兄弟选择器（同级选择）: $(“选择器1” ～“选择器2”) 选取p后边的所有为span的标签
// 5.表单选择器
$(":input")//获取input元素
$(":text") //type类型为text的元素 下同
$(":password")
$(":file")
// 6.基本过滤选择器
$("p:first")//选取页面第一个first元素
$("p:last")
$("p:last")
$("p:not(.group)") //p的类不是group的元素
$("p:even") //选取索引是偶数的元素(从0开始，下同)
$("p:odd")
$("p:eq(index)") //索引为index的元素
$("p:gt(index)") //索引大于index的元素
$("p:lt(index)") //索引小于index的元素 $(":animated")//选取正在执行动画的元素
$("input:focus") //输入获得焦点的元素
$("option:selected") //被选择的元素
//7.内容过滤器
$("div:contains('获取div中含有该内容的元素')")
$("div:empty") //div中空的元素
$("div:has(#div1)")//div内id为div1的元素
</script>
3.省市联动--jq的遍历&添加子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
var allcities=[
["济南市","青岛市","滨州市"],
["贵林","六盘水","毕节"],
["石家庄","秦皇岛","保定"],
]
$(function () {
// 绑定change时间，一改变就触发这个函数
$("#provinces").change(function(){
var cities=allcities[this.value];
//首先清空之前的城市内容
$("#cities").empty();
//遍历数组。依次添加到select中。i为下标值，n为内容
$(cities).each(function(i,n){
$("#cities").append("<option>"+n+"</option>");
})
})
})
</script>
</head>
<body>
<div>
<label>省份</label>
<select id="provinces" >
<option value="-1">--请选择</option>
<option value="0">山东省</option>
<option value="1">贵州省</option>
<option value="2">辽宁省</option>
</select>
<select id="cities"> </select>
</div>
</div>
</body>
</html>
4.表格的全选操作和隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的全选操作and表格的隔行换色操作</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(function(){
$("#topcheck").click(function(){
// topcheck 点击后，将otherchecks checked属性设置为this.checked
$(".otherchecks").prop("checked",this.checked);
})
// 页面加载完成后，改变表格的颜色
$("#table1 tr:even:gt(0)").css("background-color","yellow");
$("#table1 tr:odd").css("background-color","wheat");
})
</script>
</head>
<body >
<table border="2" id="table1" >
<tr>
<td><input type="checkbox" id="topcheck" ></td>
<td>商品名称</td>
<td>商品种类</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>华为p30</td>
<td>手机</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>macbookpro</td>
<td>电脑</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>AppleTv</td>
<td>电视</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>iphoneX</td>
<td>手机</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>sony1000XM3</td>
<td>耳机</td>
</tr>
<tr>
<td><input type="checkbox" class="otherchecks"></td>
<td>kindle</td>
<td>电子书</td>
</tr>
</table>
</body>
</html>
Web前端-关于jQuerry的更多相关文章
- Web前端需要熟悉大学里【高大上】的计算机专业课吗？
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
随机推荐
- WebSocket群聊与单聊
一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...
- 初识flink
接触flink已经有3个月了,第一次接触flink是从极客时间上的大沙的演讲中了解的. 最近半年对大数据已经有了一定的入门,一方面因为工作中会用到hive,另外工作已经快5年了,一直从事java后台开 ...
- ES6 对象增强
对象字面量语法扩展: 1, 属性初始化语法简写:给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值. l ...
- Mongo集群Java连接时UnknownHostException错误
今天在 Java 连接 Mongo 集群时报了一个超时的错误,但是在本地客户端连接单节点的时候却能连上,具体报的错误如下: Caused by: com.mongodb.MongoTimeoutExc ...
- 使用linux backtrace打印出错函数堆栈信息
一般察看函数运行时堆栈的方法是使用GDB(bt命令)之类的外部调试器,但是,有些时候为了分析程序的BUG,(主要针对长时间运行程序的分析),在程序出错时打印出函数的调用堆栈是非常有用的. 在glibc ...
- Educational Codeforces Round 63 (Rated for Div. 2) B. Game with Telephone Numbers 博弈思维+模拟+贪心思维
题意:博弈题面 给出一个数字序列 (>=11) 有两个人任意删除数字 直到 数字只剩下11位 如果删除后的数字串开头是8那么就是第一个赢 否则就是第二个人赢 第一个人先手 数字序列一定是奇 ...
- java反射机制简单实例
目录 Java反射 简单实例 @(目录) Java反射 Java语言允许通过程序化的方式间接对Class进行操作.Class文件由类装载器装载后,在JVM中将形成一份描述Class结构的元信息对象,通 ...
- python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）
python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...
- NFV-Bench A Dependability Benchmark for Network Function Virtualization Systems
文章名称:NFV-Bench A Dependability Benchmark for Network Function Virtualization Systems 发表时间:2017 期刊来源: ...
- 2018-2019-2 网络对抗技术 20165232 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165232 Exp4 恶意代码分析 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门 ...