Jquery入门_牛客博客

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

$(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() 方法获取表单的字段值。

$("#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（）直到

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