JQ基础
条件[ysx=JQ]
所有含有 id 属性的 div 元素
$("div[id]")
所有标题加上背景色
$(":header").css("background", "#EEE");
比2小 行
$("tr:lt(2)")
第二行
$("tr:eq(1)")
table表格的1、3、5...行 2、4、6行
$("tr:even") $("tr:odd")
所有未选中的 input 元素
$("input:not(:checked)")
表单同辈的 input 元素
$("form ~ input")
所有跟在 label 后面的 input 元素
$("label + input")
form 子集的 input
$("form > input")
addClass
$("p").addClass("selected1 selected2");
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass
$("p").removeClass("selected"); $("p").removeClass();
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
attr 属性操作
$("img").attr("title", function() { return this.src });
$("img").attr({ src: "test.jpg", alt: "Test Image" });
prop 属性 removeProp true/false 两种属性时用到prop
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
$("input[type='checkbox']").prop("disabled", false);
ajax 解析testajax.xml
xml内容
<?xml version="1.0" encoding="UTF-8"?>
<stulist>
<student email="1@1.com">
<name>zhangsan</name>
<id>1</id>
</student>
<student email="2@2.com">
<name>lisi</name>
<id>2</id>
</student>
</stulist>
解析 ajax`s coding
$("button").click(function(){
$.ajax({
url:'解析testajax.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
cache:false,
error: function(xml){
alert('加载XML文档出错');
},
success: function(xml){
//建立一个代码片段
var frag=$("<ul/>");
//遍历所有student节点
$(xml).find("student").each(function(i){
//获取id节点
var id=$(this).children("id"),
//获取节点文本
id_value=id.text(),
//获取student下的email属性。
email=$(this).attr("email");
//构造HTML字符串，通过append方法添加进之前建立代码片段
frag.append("<li>"+id_value+"-"+email+"</li>");
});
//最后得到的frag添加进HTML文档中
frag.appendTo("#load");
}
});
});
选项卡
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
字体的放大缩小
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
$("span").click(function(){
var thisEle = $("#ysx").css("font-size");
var textFontSize = parseFloat(thisEle , 10);
var unit = thisEle.slice(-2); //获取单位
var cName = $(this).attr("class");
if(cName == "bigger"){
textFontSize += 2;
}else if(cName == "smaller"){
textFontSize -= 2;
}
$("#ysx").css("font-size", textFontSize + unit );
});
删选框删选表格
$("#filterName").keyup(function(){
$("table tbody tr")
.hide()
.filter(":contains('"+( $(this).val() )+"')")
.show();
}).keyup();
表格变色
表格展开收缩
表单验证 红* 正确与否
五 demo7
jq 穿梭框
eg：
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
选择框 反选
$('[type=checkbox]:checkbox').each(function(){
//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用JS原生代码，简单实用
this.checked=!this.checked;
});
文本框内容滚动 ysx内容
var $ysx = $('#ysx');//获取评论框
$('.up').click(function(){ //向上按钮绑定单击事件
if(!$ysx.is(":animated")){//判断是否处于动画
$ysx.animate({ scrollTop : "-=50" } , 400);
}
})
$('.down').click(function(){//向下按钮绑定单击事件
if(!$ysx.is(":animated")){
$ysx.animate({ scrollTop : "+=50" } , 400);
}
});
文本框聚焦 失焦 focus
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
//移动，时间
<div id="ysx" style="position: relative;">123</div>
$("#ysx").click(function(){
$(this).animate({left: "500px"}, 3000);
})
$(this).animate({left: "500px",height:"200px"}, 3000);
$(this).animate({left: "500px"}, 3000)
.animate({height: "200px"}, 3000);
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.fadeOut("slow");
css未排队
$("#ysx").css("opacity", "0.5");//设置不透明度
$("#ysx").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.css("border","5px solid blue");
});
css排队
$("#ysx").css("opacity", "0.5");//设置不透明度
$("#ysx").click(function () {
$(this).animate({left: "400px", height: "200px", opacity: "1"}, 3000)
.animate({top: "200px", width: "200px"}, 3000, function () {
$(this).css("border", "5px solid blue");
})
});
//渐进消散时间 透明度
$(this).next("div.ysx").fadeTo(1600, 0.2);
//重复的展开收起 toggle(一步到位式) / slideToggle()(逐渐)
$("#panel h5.head").next("div.ysx").slideToggle(2000);
//渐进消散展示
$(this).next("div.ysx").fadeOut();
$(this).next("div.ysx").fadeIn();
//收起 下拉
$(this).next("div.ysx").slideUp();
$(this).next("div.ysx").slideDown();
带时间显示隐藏
$(this).next("div.ysx").hide(1600);
$(this).next("div.ysx").show(600);
动画
$("#panel").hover(function() {
$(this).animate({height : "150",width : "300"} , 200 );
},function() {
$(this).animate({height : "22",width : "60" } , 900 );
});
//动画分先后
$("#panel").hover(function() {
$(this).stop(true)
.animate({height : "150" } , 200 )
.animate({width : "300" } , 300 )
},function() {
$(this).stop(true)
.animate({height : "22" } , 200 )
.animate({width : "60" } , 300 )
});
eg：
$("#panel")
.animate({height : "150" } , 1000 )
.animate({width : "300" } , 1000 )
.hide(2000)
.animate({height : "show" , width : "show" , opacity : "show" } , 1000 )
.animate({height : "500"} , 1000 );
$("#panel").stop();
//停止当前动画，继续下一个动画
$("#panel").stop(true);
//清除元素的所有动画
$("#panel").stop(false,true);
//让当前动画直接到达末状态 ，继续下一个动画
$("#panel").stop(true,true);
//清除元素的所有动画，让当前动画直接到达末状态
//单击
$("div").bind("click.plugin",function(){
//双击
$("div").bind("dblclick", function(){
//悬停
$("div").bind("mouseover.plugin", function(){
mouse滑入 绑定class over
$("div").bind("mouseover mouseout", function(){
$(this).toggleClass("over");
});
聚焦
$("input").trigger("focus");
$('#btn').bind("myClick", function () {
console.log(1);
$('#test').append("<p>我的自定义事件.</p>");
});
$('#btn').click(function () {
console.log(2);
$(this).trigger("myClick");
}).trigger("myClick");
//事件模拟执行 $('#btn').trigger("click");
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
})
$('#btn').trigger("click");
//事件执行单次
$('#btn').one("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
})
移除事件 $('#btn').unbind("click");
$('#delAll').click(function(){
$('#btn').unbind("click");
});
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
})
// 移除指定事件
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的绑定函数2</p>");
})
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);//!!指定myFun2
});
//获取鼠标当前相对于页面的坐标
event.pageX + ", " + event.pageY
//event.which 鼠标按键监听
// 1 = 鼠标左键 left;
// 2 = 鼠标中键;
// 3 = 鼠标右键
阻止默认事件（submit）
event.stopPropagation();
or
return false;
<a href='http://google.com'>click me .</a>
$(function(){
//$("a[href=http://google.com]").click(...
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
})
冒泡事件 return false; / event.stopPropagation();
<div id="content">
1 层div元素
<span>2 层span元素</span>
body
</div>
<div id="msg"></div>
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>span.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡 JQ引入
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外div.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body.<p/>";
$('#msg').html(txt);
});
})
//事件合成
$("#panel h5.ysx").hover(function(){
$(this).next("div.ysx").show();
},function(){
$(this).next("div.ysx").hide();
})
//点击合成
$("#panel h5.ysx").toggle(function(){
$(this).next("div.ysx").show();
},function(){
$(this).next("div.ysx").hide();
})
//事件绑定
//.bind("click" mouseover mouseout
// $("#panel h5.ysx").bind("mouseover",function(){ //同下
// $("#panel h5.ysx").mouseover(function(){ //简写
$(function(){
$("#panel h5.ysx").bind("click",function(){
var $ysx = $(this).next("div.ysx");
if($ysx.is(":visible")){
$ysx.hide();
}else{
$ysx.show();
}
})
})
<div id="panel">
<h5 class="ysx">什么是jQuery?</h5>
<div class="ysx" style="display: block;display: none;">
继Prototype之后又一个优秀的JavaScript库容性</div>
</div>
//只执行 two();
window.onload = one ;
window.onload = two ;
//两者都执行
$(document).ready(function(){
one();
})
$(document).ready(function(){
two();
})
超链接提示图片
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg"
alt="苹果 iPod"/></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg"
alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg"
alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a>
</li>
</ul>
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function (e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
CSS DOM
console.log( $("p").css("color") );
//获取<p>元素的color
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
//设置<p>元素的fontSize和backgroundColor
console.log( $("p").height() );
//获取<p>元素的高度
$("p").height("100px");
//设置<p>元素的高度
遍历节点
var $ul = $("ul").children();
$ul.length //ul元素下有*个子元素(li)
for(var i=0;i< $ul.length;i++){
console.log( $ul[i].innerHTML );
}
var $p1 = $("p").next();
console.log( $p1.html() ); //紧邻<p>元素后的同辈元素
var $ul = $("ul").prev();
console.log( $ul.html() ); //紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
console.log( $p2.html() ); //紧邻<p>元素的唯一同辈元素
ul -> li 点击
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
HTML、文本、值
$("p").html()
//获取<p>元素的HTML代码
$("p").text()
//获取<p>元素的文本
$("p").html("<strong>你最ai?</strong>");
//设置<p>元素的HTML代码
$("p").text("<strong>你最ai?</strong>");
//设置<p>元素的文本
$("input:eq(0)").click(function(){
$(this).val("我被点击!");
});
//设置按钮的value值
EG:
$(function(){
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val();// 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val();// 得到当前文本框的值
if(txt_value==""){
$(this).val("请输入邮箱地址");
// 如果符合条件，则设置内容
//$(this).val(this.defaultValue); //同；
}
});
选择框
//设置单选下拉框选中
//选择2号 为 option 的text内容
$("#single").val("选择2号");
$("#single option").removeAttr("selected");
//移除属性selected
$("#single option:eq(1)").attr("selected",true);
//设置属性selected
//设置多选下拉框选中
//option 的text内容
$("#multiple").val(["选择2号", "选择3号"]);
$("#multiple option").removeAttr("selected");
//移除属性selected
$("#multiple option:eq(2)").attr("selected",true);
//设置属性selected
//单选和多选的 value 值
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
$(":checkbox").removeAttr("checked"); //移除属性checked
$(":radio").removeAttr("checked"); //移除属性checked
$("[value=check2]:checkbox").attr("checked",true);
//设置属性checked
$("[value=radio2]:radio").attr("checked",true);
//设置属性checked
样式操作
//获取样式
$("input:eq(0)").click(function(){//第一个input $("input:eq(0)")
alert( $("p").attr("class") );
});
$("p").attr("class","styleysx");
//设置样式
$("p").addClass("styleysx");
//追加样式
$("p").removeClass();
//删除全部样式
$("p").removeClass("styleysx");
//删除指定样式
$("p").toggleClass("styleysx");
//重复切换样式
$("p").hasClass("styleysx")
$("p").is(".styleysx")
//判断元素是否含有某样式
<style type="text/css">.styleysx{}</style>
属性操作
$("p").attr("title","选择你最喜欢的水果.");
//设置<p>元素的属性'title'
$("p").removeAttr("title");
//删除<p>元素的属性'title'
替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
//<p> 替换 <strong> 及内容
节点复制
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); // 参数true！复制自己的副本也有同样功能
})
删除节点
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");// 把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
$("ul li").remove("li[title!=菠萝]");
//把<li>元素中属性title不等于"菠萝"的<li>元素删
$("ul li:eq(1)").empty();
// 获取第二个<li>元素节点后，清空此元素里的内容
移动节点
$li_3.insertBefore($two_li); //移动节点
插入节点
var $li_1 = $("<li title='香蕉'>香蕉</li>");
//创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>");
//创建第二个<li>元素
var $li_3 = $("<li title='其它'>其它</li>");
//创建第三个<li>元素
var $parent = $("ul");
//获取<ul>节点，即<li>的父节点
var $two_li = $("ul li:eq(1)");
//获取<ul>节点中第二个<li>元素节点
$parent.append($li_1);
//append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2);
//prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li);
//insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
创建节点
var $li_1 = $("<li></li>");
// 创建第一个<li>元素
var $li_2 = $("<li></li>");
// 创建第二个<li>元素
var $parent = $("ul");
// 获取<ul>节点。<li>的父节点
$parent.append($li_1);
// 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2);
// 可以采取链式写法：$parent.append($li_1).append($li_2);
查找节点
var $para = $("p");
// 获取<p>节点
var $li = $("ul li:eq(1)");
// 获取第二个<li>元素节点
var p_txt = $para.attr("title");
// 输出<p>元素节点属性title
var ul_txt = $li.attr("title");
// 获取<ul>里的第二个<li>元素节点的属性title
var li_txt = $li.text();
// 输出第二个<li>元素节点的text
节点包裹（标签包裹）
$("strong").wrap("<b>ysx</b>");
//用<b>元素把<strong>元素包裹起来 内容替换为ysx
$("strong").wrapAll("<b></b>");
//把所有的包起来
$("strong").wrapInner("<b></b>");
// strong 标签内包裹 b 标签
//创建多个 button dom操作
shoucang() {
let that = this;
var main = document.getElementById("butt2");
var len = main.getElementsByTagName("Button").length;
var button = document.createElement("button");
var del = document.createElement("button");
del.id = "id" + len;
del.type = "text";
button.type = "Button";
button.id = "bt" + len;
button.value = "收藏的视图";
button.zoom = this.map.getView().getZoom();
button.center = this.map.getView().getCenter();
button.textContent = "收藏的视图" + button.id;
button.style.width = "77px";
button.style.fontSize = "8px";
del.textContent = "删除";
main.appendChild(button);
button.appendChild(del);
button.onclick = function () {
that.setMapCenters(button.center, button.zoom);
}
del.onclick = function () {
button.parentNode.removeChild(button);
del.parentNode.removeChild(del);
}
}
//虽然一个空格，却截然不同的效果.
var $t_a = $('.test :hidden');
var $t_b = $('.test:hidden');
//转义
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
var $id_right_a = $('#id\\.a');//jQuery对象,对特殊字符,我们转义一下
var $id_right_b = $('#id\\#b');//jQuery对象,对特殊字符,我们转义一下
var $id_right_c = $('#id\\[1\\]'); //对特殊字符，我们转义一下
var items = $("input[name='check']:checked");
//获取name为check的一组元素,然后选取它们中选中(checked)的。
$('#tb tbody tr:even').css("backgroundColor", "#888");
//获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
$(".has_children").click(function () {
$(this).addClass("highlight")//为当前元素增加highlight类
.children("a").show().end()//将子节点的a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉他们的highlight类
.children("a").hide();//将兄弟元素下的a元素隐藏
//同
this.addClass("heightlight")
.child("a").show().end()
.sibling().removeClass("")
.child("a").hide();
});
var $cr = $("#cr"); //jQuery对象
if($cr.is(":checked")){ //jQuery方式判断
