Jquery入门

上山打老虎

　　1.在jquery中$就是jQuery的一个简写形式，$（“#foo”）和Jquery（“#foo”）是等价的，
　　2.

$(document).ready(function () {
    // 语句 
  }); 
  等价于

$(function(){
  //语句
})
3.
<option value='1068'>mall</option>
.value 取的是1068
.text是mall
4.
DOM(Document Object Model)文档对象模型
HTML可描述为一颗dom树
5.
$("#foo").html() 这段代码等价于
document.getElementbyId("foo").innerHTML
6.选择器中含有"." "#"  "(" 或"]"等特殊字符需要进行转义
例如  HTML代码如下:
<div id ="id#b">bb</div>
<div id = "id[1]">cc</div>
如果按照普通方式来获取，例如：
$('#id#b'); $('#id[1]')
以上代码不能正确获取到元素，正确的写法如下：
$('#id\\#b') 转义特殊字符#  $('#id\\[1\\]') 转义特殊字符[]

-------------------------------------------------------------------------------------------------------------------

　　---------------------------------------------------------------------------------------------------------------------------------------------------------

$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
<p1>点我不会消失。</p1>
<p>点我消失!</p>
<p>点我也消失!</p>

$("p")和<p>是对应的
　　------------------------------------------------------------------------------------------------------------------------------------------------------------

$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
  });
});
<body>
<button>点我</button>
</body>

　　button是按钮
　　-----------------------------------------------------------------------------------------------------------------------------------------------------
　　演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide();
  });
});
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>

　　点击点我，这是一个段落和这是另一个段落将会隐藏。
　　--------------------------------------------------------------------------------------------------------------------------------------------------------
　　$(".test").hide()
　　演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。

<script>
$(document).ready(function(){
  $("button").click(function(){
  $(".test").hide();
  });
});
</script>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

　　点击点我，这是一个标题和这是一个段落将会被隐藏
　　---------------------------------------------------------------------------------------------------------------------------------------------------------
　　$("#test").hide()
　　演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

<script>
$(document).ready(function(){
  $("button").click(function(){
  $("#test").hide();
  });
});
</script>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

点击点我，这是另外一个段落将被隐藏
　　-----------------------------------------------------------------------------------------------------------------------------------------------------
　　dblclick() 双击鼠标 mouseenter() 鼠标移到此处触发事件 mouseleave() 鼠标离开触发事件 mousedown()鼠标按下触发事件
　　jQuery mouseup()鼠标在段落松开触发事件
---------------------------------------------------------------------------------------------------------------------------------------------------
　　使用jQuery val() 方法获取表单的字段值。
　　<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
　　$("#test").val() 其值为菜鸟教程
　　----------------------------------------------------------------------------------------------------------------------------------------------------------
　　jQuery attr() 方法获取属性值。

<script>
$(document).ready(function(){
  $("button").click(function(){
  alert($("#runoob").attr("href"));
  });
});
</script>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>

点击显示href属性的值将会弹出http://www.runoob.com　　------------------------------------------------------------------------------------------------------------------
　　.txt()设置文本 .html（）设置html .val()设置值
　　--------------------------------------------------------------------------------------------------------------------
　　jQuery append()
在选取元素的末尾添加内容

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
  $("p").append(" <b>追加文本</b>。");
  });
  $("#btn2").click(function(){
  $("ol").append("<b>追加列表项</b>");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>

点击以后

　　jQuery prepend()
在选取元素的开头添加内容
　　jQuery append() -插入多个元素
创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。

function appendText(){
var txt1="<p>文本。</p>";        // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";         // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);    // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button οnclick="appendText()">追加文本</button>
</body>

jQuery after() 和 before()
在选取元素的前后添加 HTML元素。

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
  $("img").before("<b>之前</b>");
  });
  $("#btn2").click(function(){
  $("img").after("<i>之后</i>");
  });
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>

　　点击之后

　　remove（）移除
　　empty（）
移除选取元素的所有子元素
　　remove（）使用参数

<script>
$(document).ready(function(){
  $("button").click(function(){
  $("p").remove(".italic");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

　　点击以后这是另外一个段落会消失
　　-----------------------------------------------------------------------------------------------------------------
　　parent（）父元素

<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
  <div style="width:500px;">div (曾祖父元素)
  <ul>ul (祖父元素)  
    <li>li (父元素)
    <span>span</span>
    </li>
  </ul>   
  </div>

li父元素会是红色，因为li是span的父节点　　下面是find（）的用法
　　$("div").find("span").css({"color":"red","border":"2px solid red"});
　　则span将是红色
　　parents（）则是他的父节点和爷爷节点全部包含进来
　　parentsUtil( )是直到的意思
　　$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
　　children()孩子接点
　　siblings()同胞
　　next()下一个节点
　　nextAll（）后面所有的
　　nextUntil（）直到
　　------------------------------------------------------------------------------------------------------------------------------------------

　　

[jQuery] Jquery入门

相关帖子

#yyds干货盘点#--30分钟上手jQuery

jQuery第九篇 each方法

jquery获取checkbox选中的值

无事来学学--JQuery详细讲解（上）#yyds干货盘点#

20个提升效率的JS简写技巧

无事来学学--JQuery详细讲解（下）#yyds干货盘点#

无事来学学--JQuery详细讲解（中）#yyds干货盘点#

带你了解前端基础之jQuery#yyds干货盘点#

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

上山打老虎 LV4