50 Jquery 库
一.概念：
1.jquery 的选择器和ccs 相同 2.jquery对象， dom对象的集合，类似python中list，有自己的各种方法和属性 // [dom1,dom2,.....] 3.方便之处，可以省略原生js中for 循环的操作 4.jquery 对象和dom对象的关系：
jquery对象转化成dom 对象：$()[]---------->dom对象 例子：$("li")[0] 切片
dom对象转化成jquery对象：$(dom)---------->jquery对象 5.入口函数 ，当js代码放在head头部时，需要写入口函数
导入jquery.js 文件
<script src="jquery-3.3.1.js"></script>
<script>
入口函数，相当于window.onload=function(){写js代码}
$(function(){写js代码})
</script>
6.事件委派 封装在 on 方法中
一般是 父节点或祖父节点等，委派某个事件给下面的子节点,实现父节点下，子节点同步性能的作用。 格式： $(父节点或祖父节点等).on(事件，字节点或子孙节点，function（）{}） 例子1：$("ul").on("click","li",function(){alert($(this).html()});
例子2：$("table").on（”click”，“#td1”,function(){$(this).parent().parent().remove()}） //此事例是表单中的操作
二.jquery 选择器 和 筛选器
1.基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
2.层级选择器
$(".outer div") 后代选择器 子子孙孙
$(".outer>div") 子代 ，只包含儿子
$(".outer+div") 毗邻，下面的第一个
$(".outer~div") 该dom对象下面的兄弟
3.基本筛选器 ：冒号有筛选的含义，选出
$("li:first") 或$("li").first() 用后面这种比较好些，不用字符串的拼接
$("li:eq(2)") 或$("li").eq(2)
$("li:even")
$("li:gt(1)")
4.属性选择器
$("'[自定义属性名]'")
$('[id="div1"]')
$('["alex="sb"][id]')
5.表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
5.表单属性选择器
:enabled
:disabled
:checked
:selected
例子：$("input:checked")
6.过滤筛选器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")
7.查找筛选器
1. 查找子标签：
$("div").children(".test")
$("div").find(".test")
2.向下查找兄弟标签：
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
3.向上查找兄弟标签：
$("div").prev()
$("div").prevAll() //括号里面还可以写条件 $("div").prev(":lt(4)") //该节点前所有兄弟中索引小于4的兄弟标签
$("div").prevUntil("标签名") //不包含，括号里面的标签
4.查找所有兄弟标签：
$("div").siblings() //不包含自己
5.查找父标签：
$(".test").parent()
$(".test").parents() //一层一层往上找父亲
$(".test").parentUntil()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src ="jquery-3.3.1.js"></script>
<script>
//选择器
//入口函数
$(function () {
//基础选择器
// $(".c1").css("color","red");
// $(".c3").css("color","red");
// $(".c3:first").css("color","red");
// $(".c3").first().css("color","red");
// $(".c3:last").css("color","red");
// $(".c3").last().css('color',"red");
// $(".c3:even").css("color","red");//偶数
// $(".c3:odd").css("color","red");//奇数
// $(".c3:gt(2)").css("color","red");//索引大于2的
// $(".c3:lt(2)").css("color","red");//索引小于2的
// $("[alex]").css("color","red");//自定义属性选择器
// $("[alex='123']").css("color","red");
// $("[alex='123'][peiqi]").css("color","red");
// $("[type='checkbox']").attr("checked","checked");
// $(":checkbox").attr("checked","checked"); //进阶筛选器
// $(".c5 :checked"); //筛选.c5下被选中的标签的集合 // $(".c3:first").css("color","red");
// $(".c3").first().css("color","red");
// var index =2;
// $(".c3:"+"eq("+index+")").css("color","red"); //需要字符串的拼接，麻烦
// $(".c3").eq(index).css("color","red"); //不需要字符串的拼接 //判断某个标签是否拥有那个属性
// console.log($("#i1").hasClass("c1"));//true
// console.log($("[yuan]").hasClass("c7")); //true,一个对象拥有就行 //导航选择器
//查找兄弟标签
// 向下查找兄弟标签
// $("#i2").next().css("color","red");//下一个
// $("#i2").nextAll().css("color","red");//向下找所有的兄弟
// $("#i2").nextUntil(".c8").css("color","red");//不包括until中的那个
//向上查找兄弟标签
// $("#i2").prev().css("color","red");//上一个兄弟
// $("#i2").prevAll().css("color","red");//向上找所有的兄弟
// $("#i2").prevUntil("#i3").css("color","red");//向上找兄弟直到#i3，不包括#i3
//找到所有的兄弟标签，不包括自己
// $("#i2").siblings().css("color","red"); //查找子孙标签
// $(".p1").children().css("color","red");
// $(".p1").children("p").css("color","red");
// $(".p1").find("p").css("color","red");//find 和children的区别，find必须加条件 // $(".p1").children(":first").css("color","red");//第一个儿子
// $(".p1").children().first().css("color","red"); //查找父标签
// $('.c10').parent().css("color","red");//找到父标签
// $(".c10").parents() //找到一层一层往上找父标签
// $(".c10").parents.Until("body")/一层一层往上找父标签到body结束，且不包括body }) </script>
</head>
<body>
<div class="c1" id="i1">DIV</div> <div class="c2">
<p class="c4">111</p>
<a href="">click</a>
</div>
<div class="p1">
<p class="c3" id="i3">222</p>
<p class="c3">333</p>
<p class="c3" id="i2">444</p>
<p class="c3">555</p>
<p class="c3 c8">666</p>
<p class="c3">777</p>
</div> <div alex="123" peiqi="678">alex和配齐</div>
<div alex="123">alex</div>
<div alex="234">egon</div>
<div peiqi="678">8888</div>
<div class="c5">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div> <div class="c6" yuan="123">123</div>
<div class="c7" yuan="234">234</div> <div class="c9">
<p>111</p>
<p>222</p>
<div class="c10">
<p>333</p>
</div>
<a href="">click</a>
</div>
</body>
</html>
jquery选择器和赛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body> <ul class="box">
<li>123</li>
<li>234</li>
<li>456</li>
<li>567</li>
<li class="c1">678</li>
</ul>
<button class="add">ADD</button>
<button class="rem">remove</button> <script>
//jquery 事件绑定格式： $(选择器).事件（function（）{}） // $("ul").click(function () {
// alert($(this).html());
// });
// 事件委派
$("ul").on("click","li",function () {
alert($(this).html());
});
$(".add").click(function () {
// $(".box").appendChild('<li>789</li>');不能这样写
$(".box").append("<li>789</li>");
});
//如何删除最一个孩子标签
$(".rem").click(function () { // $(".box").children(":last").css("color","red");
// $(".box").remove($(".box").children(":last"));//这个不行,语法不是这样的 $(".box").children(":last").remove();
//如何删除
}) </script> </body>
</html>
节点的删除和添加以及事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 15%;
height: 600px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 85%;
height: 600px;
background-color: lightgray; } .title{
text-align: center;
line-height: 30px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
} .hide{
display: none;
}
</style> <script src="jquery-3.3.1.js"></script>
</head>
<body> <div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con hide">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div> <script>
//jquery 版的菜单栏实现
$(".title").click(function () {
// $(this).next().removeClass("hide");//操作完之后的对象还是$(this).next()
// $(this).parent().siblings().children(".con").addClass("hide"); $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
}) </script>
</body>
</html>
基于jquery实现菜单栏
四.jquery 操作 1 文本操作
$("").html() //获取值
$("").text()
$("").html("参数") //设置内容
$("").text("参数") 2 属性操作
$().attr("") //获取属性值
$().attr("","") // 添加属性和值
$("p").attr("alex")
$("p").attr("alex","dsb") //添加属性和值
$("p").removeAttr("class") // 删除属性 3 class 操作 $("p").addClass("c1") // 添加样式
$("p").removeClass("c1") //// 删除样式 4.节点的删除和添加
删除某节点：
jquery节点对象.remove()
添加某节点：
例子：$(".box").append("<li>789</li>");
50 Jquery 库的更多相关文章
- jquery库和cityselect插 件的省市 级联
/*$(function(){ $("#select_provice").citySelect({ prov:"北京", nodata:"none&q ...
- 锋利的jQuery-1--解决jquery库和其他库的冲突
在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这 个$而产生的冲突的发生.比如说:$('#xmlas')和JQue ...
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- Jquery库及其他库之间的$命名冲突解决办法
首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmla ...
- 如何避免jQuery库和其他库的冲突
默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...
- 如何解决jquery库的冲突问题
多个库之间的冲突 当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免. 那么,既然有冲突的问题,为什 ...
- jQuery库冲突解决办法
一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...
- 跨域 jQuery库ajax请求
XMLHttpRequest是原生ajax,缺点是使用起来比较繁琐. jQuery库提供了一组简洁的ajax请求方法. ajax() get() post() 具体使用参考官方API: http:// ...
- day050 前端Jquery库的使用
一.导入jquery文件 <script src=" jquery库文件"></script> 二.选择标签 >>概念明晰: $是jQuery类 ...
随机推荐
- 【百度统计】设置页面元素点击事件转化pv、uv
html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...
- vue 拨打电话
<a v-bind:href="'tel:'+(order.orderer.phone)">{{order.orderer.phone}}</a> v-bi ...
- MySQL数据库----存储过程
存储过程 存储过程包含了一系列可执行的sql语句,存储过程存放于MySQL中,通过调用它的名字可以执行其内部的一堆sql -- 存储过程的优点: -- 1.程序与数据实现解耦 -- 2.减少网络传输的 ...
- php随笔10-thinkphp 3.1.3 模板继承 布局
8.25 模板继承 模 板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类 的继承一样,模板也可以定义一个 ...
- VC++ 实现修改文件创建、访问、修改时间属性(转载)
转载:http://sunnysab.blog.163.com/blog/static/18037500920134221295425/ struct _FILETIME { //结构体定义 DWOR ...
- 定义c/c++全局变量/常量几种方法的区别(转载)
出自:http://www.cnblogs.com/yaozhongxiao/archive/2010/08/08/1795338.html 在讨论全局变量之前我们先要明白几个基本的概念: 1. 编 ...
- C#对两种类型动态库的使用
一.托管:如果一个动态库本身是基于.NET的,那么可以直接在工程引用里右键添加引用,如微软的COM技术[因为你依托的是微软的框架,所以需要regsvr32注册] 二.非托管:如果不是基于.NEt的,那 ...
- HDU3652 B-number（数位DP）题解
思路: 这里的状态分为3种,无13和末尾的1,无13且末尾为1,有13,然后DFS 等我搞清楚数位DP就来更新Orz 代码: #include<iostream> #include< ...
- NSwag enum
https://github.com/RSuter/NJsonSchema/wiki/JsonSchemaGenerator#integer-vs-string-enumerations Intege ...
- 【安装】Microsoft SQL Server的安装
数据库版本:2012 系统环境:windows 7 一.安装 依次选择“安装->全新 SQL Server 独立安装或向现有安装添加功能”;点“确定” 选择版本,推荐标准版,这里是直接输入序列号 ...