回答編集履歴

4

追記2 擬似要素と擬似クラスの違い、仕様書対応部 追加

2019/06/18 10:44

投稿

退会済みユーザー
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  ### 擬似要素のプロパティ値を変更する
18
18
 
19
- 後、recalさんが書かれているように、擬似要素をjQueryで変更する事は出来きません。素のJavaScriptでCSSOMを使えばできます。(試しましたが出来ました)。
19
+ recalさんが書かれているように、擬似要素をjQueryで変更する事は出来きません。素のJavaScriptでCSSOMを使えばできます。(試しましたが出来ました)。
20
20
 
21
21
 
22
22
 
@@ -251,3 +251,101 @@
251
251
 
252
252
 
253
253
  質問者側も質問文を書く事で精一杯なのは理解しておるつもりです。不躾ではありますが、何卒よろしくお願い致します<(_ _)>????
254
+
255
+
256
+
257
+
258
+
259
+ ### 追記2: $("")で、**擬似要素**は取得できないが、**擬似クラス**文字列を使って要素は取得できる
260
+
261
+ もしやこの辺りがややこしいから勘違いもあるかも…と思い、後から追記しました。
262
+
263
+
264
+
265
+ #### 擬似要素
266
+
267
+ `$()`や`element.querySelector(all)()`に渡すセレクター文字列は、擬似要素・擬似クラスも構文的にはOKです。ただし、仕様書にもありますが、擬似要素の場合は、DOMとして実際に要素が存在するわけでは無いため、例えば、`element.querySelector(".foo::before")`と記述しても違法にはならず、エラーも投げられません。返却値は`null`が返されます。
268
+
269
+
270
+
271
+ > note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.
272
+
273
+ >
274
+
275
+ > 作成者にアドバイスです。セレクタでの擬似要素の使用は許可されていますが、ドキュメント内のどの要素とも一致しないため、結果として要素が返却されません。そのため、この仕様で定義されているメソッドに、疑似要素セレクターを渡す事は避けて下さい。
276
+
277
+ [6.5. Grammar | Selector API lvele2 -W3C-](https://www.w3.org/TR/selectors-api2/#grammar)
278
+
279
+
280
+
281
+ #### 擬似クラス
282
+
283
+ 擬似クラスは要素が返却されます。ですのでCSSの変更もできます。例コードを以下に。
284
+
285
+
286
+
287
+ ```html
288
+
289
+ <div id="foo">this is #foo text.</div>
290
+
291
+
292
+
293
+ <div>
294
+
295
+ <div class="item">this is 1st item.</div>
296
+
297
+ <div class="item">this is 2rd item.</div>
298
+
299
+ <div class="item">this is 3rd item.</div>
300
+
301
+ </div>
302
+
303
+ ```
304
+
305
+
306
+
307
+ ```css
308
+
309
+ .foo::before{
310
+
311
+ content: "@@";
312
+
313
+ }
314
+
315
+ .item:nth-of-type(2){
316
+
317
+ color: red;
318
+
319
+ }
320
+
321
+ ```
322
+
323
+
324
+
325
+ ```js
326
+
327
+ "use strict";
328
+
329
+
330
+
331
+ let _ = console.log,
332
+
333
+ type = v => ({}.toString.call(v));
334
+
335
+
336
+
337
+
338
+
339
+ let elm = $("#foo");
340
+
341
+ _( elm.text() ) // this is text.
342
+
343
+
344
+
345
+ let secondItemTxt = $(".item:nth-of-type(2)").text(); //
346
+
347
+ // === let secondItemTxt = document.querySelector(".item:nth-of-type(2)").innerHTML;
348
+
349
+ _( secondItemTxt ) // this is 2nd item.
350
+
351
+ ```

3

誤情報 修正

2019/06/18 10:44

投稿

退会済みユーザー
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ただし、CSSOMは比較的新しい仕様であり、英語でもまだMDN等使用書やWeb記事が充実していない様子でした。
23
+ ただし、英語でもまだMDN等使用書の解説部分やWeb解説記事が充実していない様子でした。
24
24
 
25
25
  (一応対応箇所のリンクを貼っておきます。ただ、インターフェースという概念やIDL(Interface Definition Language)の知識が必要ですので、まだ未学習でしたら、厳しいかも知れません。)
26
26
 

2

分かりやすいよう、一文訂正

2019/06/18 03:53

投稿

退会済みユーザー
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### jQueryによるスクロールイベント時の要素位置の取得
2
2
 
3
- **jQueryでスクロールイベントを絡めた**要素位置の取得**は出来ないっぽい**ですね。多分。。(私英語での調べ&テストより)
3
+ **jQuery****スクロールイベント**の**要素位置の取得**は**出来ないっぽい**ですね。多分。。(私英語での調べ&テストより)
4
4
 
5
5
 
6
6
 

1

追記 追加

2019/06/17 15:11

投稿

退会済みユーザー
test CHANGED
@@ -231,3 +231,23 @@
231
231
  });
232
232
 
233
233
  ```
234
+
235
+
236
+
237
+ ### 追記
238
+
239
+ 質問のjsのコードも、質問投稿時のバーにある`<code>`を使って、'コード表示'されるようにして頂けると、回答者も見やすく非常に助かります。
240
+
241
+
242
+
243
+ ```
244
+
245
+ 回答者: 見やすい・理解しやすい・コピペの作業が減る
246
+
247
+ 質問者: その結果、回答が得られやすくなる
248
+
249
+ ```
250
+
251
+
252
+
253
+ 質問者側も質問文を書く事で精一杯なのは理解しておるつもりです。不躾ではありますが、何卒よろしくお願い致します<(_ _)>????