jquery 获取标签data_id值 jq获取p标签内容

条件[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="[e-mail]"> 
 <name>zhangsan</name>
 <id>1</id>
 </student>
 <student email="[e-mail]">
 <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();表格变色
表格展开收缩
表单验证 红* 正确与否
 五 demo7jq 穿梭框
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方式判断